1.动画

动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。

1.1 基本使用

制作动画分为两步：

定义动画 @keyframes
使用(调用)

1.2 @keyframes(关键帧) 定义动画

@keyframes animation{0%{...}100%{...}
}

(1)0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
(2)在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
(3)动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
(4)请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%。

1.3 初步使用

页面一打开，一个DIV将从左移至右。

@keyframes move {from {transform: translateX(0px);}to {transform: translateX(1400px);}
}div {width: 100px;height: 100px;background-color: teal;/* 调用动画 */animation-name: move;/* 持续时间 */animation-duration: 3s;
}

1.4 绕圈

@keyframes move {0% {transform: translateX(0px);}25% {transform: translateX(1000px);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0px, 500px);}100% {transform: translate(0px, 0px);}
}div {width: 100px;height: 100px;background-color: teal;animation-name: move;animation-duration: 3s;
}

绕着页面转

2.animation-name属性

animation-name属性用于定义要应用的动画名称。
基本语法格式：

animation-name: keyframename | none;

animation-name 属性初始值为 none ，适用于所有块元素和行内元素。 keyframename 参数用于规定需要绑定到选择器的keyframe的名称，如果值为 none ，则表示不应用任何动画，通常用于覆盖或者取消动画。

3.animation-duration属性

animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
基本语法格式：

animation-duration: time;

animation-duration 属性初始值为 0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

4.animation-timing-function属性

animation-timing-function 用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。
基本语法格式：

animation-timing-function:value;

animation-timing-function 包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等常用属性值。
animation-timing-function的常用属性值如下：

5.aniamtion-direction属性

动画是否逆向播放

aniamtion-direction: norma | reverse | alternate | alternate-reverse
1.normal 默认的
2.reverse 从终点运动向起点终点=>起点
3.alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
4.alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

6.解析 animation-fill-mode

动画结束后状态

aniamtion-fill-mode:forwards | backwards
forwards 保持当前位置
backwards 回到初始位置

7.动画的常见属性

*暂停动画： animation-play-state: pulsed;经常和鼠标经过等其他配合使用
*想要动画走回来，而不是直接跳回来： animation- direction: alternate
*盒子动画结束后，停在结東位置： animation- fill-mode: forwards
————————————————
版权声明：本文为CSDN博主「疯狂的地球人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43742708/article/details/114926809
总结
1、keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
3、用cubic-bezier设置动画的速度曲线，它是由曲线的斜率决定速度的快慢。

【animation动画】相关推荐

【Android 基础】Animation 动画介绍和实现
转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...
CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
python【Matlibplot绘图库】Animation动画（真の能看懂~！）
文章目录 1 代码 2 效果 3 解释 1 代码 from matplotlib import pyplot as plt from matplotlib import animation impor ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入一.创建 AnimatedWidget 动画组件二.创建动画控制器三.创建动画四.动画运行五.完整代码示例六.相关资源 Animated ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录一.Flutter 动画类型二.Flutter 动画的核心类三.相关资源 Flutter Animation 动画 : Flutter 动画类型为 Widget 组件添加动画为动画添 ...

【animation动画】

文章目录