1.transition过渡
- 1.指定元素
transition: 1s height, 1s width; - 2.延迟
transition: 1s height, 1s 1s width;
// 上面代码指定，width在1秒之后再开始变化，也就是延迟（delay）1秒
- 3.状态变化速度
- ease：慢-快-慢（默认）
- linear：匀速
- ease-in：加速
- ease-out：减速
- cubic-bezier函数：自定义速度模式演示
语法
// 完整写法
transition: 1s 1s height linear;
// 常用写法
transition: 1s;
注意transition一般加在原始元素上，不要加在hover，active等状态上，不然只针对某种状态。
2.animation动画
定义动画
- 0%可以用from代表，100%可以用to代表
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
// 相当于
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
- 如果省略某个状态，浏览器会自动推算中间状态
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes rainbow {
to { background: yellowgreen }
}
- 可以把多个状态写在一行
@keyframes pound {
from，to { transform: none; }
50% { transform: scale(1.2); }
}
动画参数
- animation-fill-mode 动画结束时的状态
- none：默认值，回到动画没开始时的状态
- forwards：让动画停留在结束状态
- backwards：让动画回到第一帧的状态
- both: 根据animation-direction（见后）轮流应用forwards和backwards规则
- animation-direction动画循环的方式
- normal默认值
- alternate
- reverse
-
alternate-reverse
具体参照下图
animation-direction.png
常用的值是normal和reverse。浏览器对其他值的支持情况不佳，应该慎用。
动画语法
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
// 相当于
div:hover {
animation-name: rainbow;
// 动画名称
animation-duration: 1s;
// 持续时间
animation-timing-function: linear;
// 动画状态
animation-delay: 1s;
// 动画延迟
animation-fill-mode:forwards;
// 动画结束状态
animation-direction: normal;
// 动画循环方式
animation-iteration-count: 3;
// 动画循环次数，设为infinite则为无限循环
}
steps函数
用于实现逐帧动画
div:hover {
animation: 10s rainbow infinite steps(10,start);
}
动画将被分成10帧来播放，而不是平滑过渡。第二个参数默认为end，可设置为start。
动画暂停
animation-play-state
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
