CSS 的关键帧动画

学习最好的方法，就是把你知道的告诉别人

在交互里加入动画，能让操作变得更自然，更友好，用户体验更棒，下面来看看css 是如何控制元素产生动画的。

关键帧动画主要由animation 以及@keyframes组成：
animation 控制动画的外观。
@keyframes 控制动画中各个阶段的变化。

先来看这两个属性：

• animation-name：给元素设置动画的名称，该名称表示@keyframes里所定义的动画效果
• animation-duration设置动画所需花费的时间。

每个阶段我们可以用百分比来表示，0%表示动画的开始，100%表示动画的结束，还可以用 from 和 to来表示，from 表示0%，to表示100%，然后在对应的时间里给元素过渡添加动画。