过渡 transition
一、语法
transition: property duration timing-function delay;
默认值： all 0 ease 0
简单示例：transition: all .5s ease-in-out 1s;
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property : 为哪些属性设置过渡效果
- transition-duration : 过渡效果持续的时间
- transition-timing-function : 过渡效果的速度变化
- transition-delay : 延迟执行的时间
二、属性
1、过渡属性
transition-property: none | all | property;
- none : 没有属性会获得过渡效果
- all : 所有属性都将获得过渡效果
- property : 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
div {
background:red;
transition-property: background;
transition-duration: 2s;
}
div:hover {
background:salmon;
}
2、持续时间
transition-duration: time;
time为数值，单位为s（秒）或者ms(毫秒)
div {
background:red;
transition-property: background;
transition-duration: 2s;
}
div:hover {
background:salmon;
}
3、速度变化
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out;
- ease : 由快到慢，逐渐变慢
- linear : 匀速
- ease-in : 加速
- ease-out : 减速
- ease-in-out : 加速再减速
- cubic-bezier(n,n,n,n) : 贝塞尔曲线,自定义
div {
background:red;
transition-property: background;
transition-duration: 2s;
transition-timing-function:linear;
}
div:hover {
background:salmon;
}
4、延迟时间
transition-delay: time;
time为数值，单位为s（秒）或者ms(毫秒)
div {
background:red;
transition-property: background;
transition-duration: 2s;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover {
background:salmon;
}
动画 animation
一、语法
animation: name duration timing-function delay iteration-count direction;
默认值： none 0 ease 0 1 normal
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name : 要绑定到选择器的关键帧（动画）名称
- animation-duration : 动画持续时间
- animation-timing-function : 动画的速度变化
- animation-delay : 延迟执行的时间
- animation-iteration-count : 动画的播放次数
- animation-direction : 动画运动的方向
