animation 动画
在 CSS3 中新增了一个 animation 模块，可以制作出类似于 flash 一样的动画出来；
使用 CSS3 的 animation 制作动画包含两个部分：
- 用关键帧声明一个动画；
- 在 animation 调用关键帧声明的动画；
声明动画
在 CSS3 中，使用 @keyframes 来声明一个动画
@keyframes 动画名字 {
/*
* 动画时长的百分比
* 0 - 100%
* from（与 0% 相同）
* to（与 100% 相同）
*/
keyframes-selector {
/* css 样式 */
css-styles
}
}
使用动画
-
@keyframes 只是用来声明一个动画，如果一个声明的动画不被调用，那么这个动画是没有任何意义的；
-
在 CSS3 中通过 animation 属性来调用动画，语法如下：
animation: name duration timing-function delay iteration-count direction fill-mode play-state; -
属性值
属性 描述 @keyframes 1. 定义的动画名称用来被 animation-name 所使用
2. 简单的动画可以直接使用关键字 from 和 to，即从⼀种状态过渡到另⼀种状态animation-name 1. 指定要绑定到选择器的关键帧的名称
2. none：不引用任何动画名称
3. identifier: 定义一个或多个动画名称（identifier标识）animation-duration 检索或设置对象动画的持续时间，默认值：0s animation-timing-function 1. 设置动画将如何完成一个周期，默认值：ease
2. linear：线性过渡
3. ease：平滑过渡
4. ease-in：由慢到快
5. ease-out：由快到慢
6. ease-in-out：由慢到快再到慢
7. step-start：等同于 steps(1, start)
8. step-end：等同于 steps(1, end)animation-delay 设置动画在启动前的延迟间隔，默认值：0s animation-iteration-count 1. 定义动画的播放次数
2. infinite：无限循环
3. number: 指定对象动画的具体循环次数animation-direction 1. 指定是否应该轮流反向播放动画
2. normal：正常方向
3. reverse：反方向运行
4. alternate：动画先正常运行再反方运行，并持续交替运行
5. alternate-reverse： 动画先反运行再正方向运行，并持续交替运行animation-fill-mode 1. 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
2. none： 默认值，不设置对象动画之外的状态
3. forwards： 设置对象状态为动画结束时的状态
4. backwards：设置对象状态为动画开始时的状态
5. both： 设置对象状态为动画结束或开始的状态animation-play-state 1. 指定动画是否正在运行或已暂停
2. running： 运动
3. paused： 暂停
示例代码
<style>
#oDiv {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
animation: test 2s 5 alternate paused;
}
@keyframes test{
0% {
left: 0;
top: 30px;
}
50% {
left: 400px;
top: 30px;
}
100% {
left: 400px;
top: 200px;
}
}
</style>
<button id="playAnimate">播放动画</button>
<button id="pauseAnimate">暂停动画</button>
<div id="oDiv"></div>
<script>
var oDiv = document.getElementById("oDiv");
var playAnimate = document.getElementById("playAnimate");
var pauseAnimate = document.getElementById("pauseAnimate");
playAnimate.onclick = function(){
oDiv.style.animationPlayState = "running";
}
pauseAnimate.onclick = function(){
oDiv.style.animationPlayState = "paused";
}
</script>
animation 事件
同样，动画也有对应的事件，与过渡只提供有 transitionend 事件不同的是，在 CSS 动画播放时，会发生以下三个事件：
- animationstart：CSS 动画开始后触发；
- animationiteration：CSS 动画重复播放时触发；
- animationend：CSS 动画完成后触发；
animation 特点
优点：
- 无需每一帧都被记录，通过关键帧设置，方便开发；
- 实现简单，通常 UI 可以直接给到 css 文件，前端只需要导入即可（移动端注意屏幕适配）；
缺点：
- css 没法动画交互，无法得知当前动画执行阶段；
- animation 兼容性需要加前缀，导致代码量成倍增长；
- 对于复杂动画的实现，导入的 css 文件过大，影响页面的渲染树生成，从而阻塞渲染；
面试题
CSS3 中 transition 和 animation 的属性分别有哪些（哔哩哔哩）
transition 过渡动画
- transition-property：指定过渡的 CSS 属性；
- transition-duration：指定过渡的持续时间；
- transition-timing-function：指定过渡函数；
- transition-delay：指定过渡的延迟时间；
animation 关键帧动画
- animation-name：指定要绑定到选择器的关键帧的名称；
- animation-duration：动画指定需要多少秒或毫秒完成；
- animation-timing-function：设置动画将如何完成一个周期；
- animation-delay：设置动画在启动前的延迟间隔；
- animation-iteration-count：定义动画的播放次数；
- animation-direction：指定是否应该轮流反向播放动画；
- animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式；
- animation-play-state：指定动画是否正在运行或已暂停；
CSS 动画如何实现？
即 animation 属性，对元素某个或多个属性的变化进行控制，可以设置多个关键帧；属性包含了动画的名称、完成时间（以毫秒计算）、周期、间隔、播放次数、是否反复播放、不播放时应用的样式、动画暂停或运行；
它不需要触发任何事件就可以随着时间变化来改变元素的样式；
使用 CSS 做动画：
- @keyframes 规定动画；
- animation 所有动画属性的简写属性；
- animation-name 规定 @keyframes 动画的名称；
- animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是 0；
- animation-timing-function 规定动画的速度曲线。默认是 ease；
- animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式；
- animation-delay 规定动画何时开始。默认是 0；
- animation-iteration-count 规定动画被播放的次数，默认是 1；
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal；
- animation-play-state 规定动画是否正在运行或暂停。默认是 running；
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级✍️ CSS3 的 transition 过渡动画
上一篇
评论
