css animation动画完成后隐藏_史上最简单的CSS动画，transform，transition和animation详解...

什么是动画

动画其实就是人脑的bug，动画是由多个图片组成的，这其中的画面叫做帧，通过这些连续的帧来让大脑产生视觉残像而产生动画，在现在对动画的应用中，影视播放速度为每秒24帧游戏秒30帧，还有60帧，120帧，140帧的。。。。

而在CSS中我们大都使用transform，transition和animation来制作动画

在很久之前我们使用的是transform和transition配合来做动画，只有css3里面有了新的样式animation，下面我来说说我理解的动画

transform和transition

transform属性定义了一系列应用于元素和元素子元素的变换规则集合，可以控制元素的
1.位移translate
2.缩放scale
3.旋转rotate
4.倾斜skew

详情可以参考MDN文档：

transform​developer.mozilla.org

我选取了部分代码来给大家参考，这些代码是看不会的，除非自己手敲一边，自己用一边

/* Keyword values */

transition又提供了过度效果，作用就是补充中间帧。

语法 ：
1.transition: 属性名时长过渡方式延迟
2.transition: left 200mS linear 可以用逗号分隔两个不同属性
3.transition: left 200ms, top 400ms 可以用all代表所有属性
4.transition: all 200ms
过渡方式有: linear | ease ease-in | ease-out | ease-in-out | cubic-bezier step-start step-end steps,具体含义要靠数学知识

/*第一个值为方向，第二个值为时间*/
 

并不是所有属性都能过渡
display: none => block没法过渡一般改成visibility: hidden => visible (不要问为什么)
display和visibility的区别自己搜一下
background颜色可以过渡吗?
opacity透明度可以过渡吗?
大家可以都试试。

当transform和transition结合起来就是制作简单的动画，参考代码：

https://codepen.io/pen/?&editable=true​codepen.io

关于transition的用法请参考MDN文档：

transition​developer.mozilla.org

animation

在css3中给出了动画样式animation，关于animation的用法：

1.首先使用 @keyframes 来声明动画

/*先用@keyframes声明一个变量*/

然后放在要加的动画元素上

/*之后再通过animation属性把定义的样式加上*/

下面给出我记录的语法

缩写语法：animation:时长|过渡方式| 延迟|次数|方向|填充模式|是否暂停|动画名;
时长: 1s或者1000ms
过渡方式:跟transition取值一样，如linear
次数: 3或者2.4或者infinite
方向: reverse | alternate、alternate-reverse
填充模式: none | forwards | backwards | both
是否暂停: paused | running以上所有属性都有对应的单独属性

关于animation的详细用法可以参考MDN文档

animation​developer.mozilla.org