每天一点前端动画(2020-05-13)

css3动画
CSS 中的 transition 属性允许块级元素中的属性在指定的时间内平滑的改变
语法如下：

transition: property duration timing-function delay;

具体的属性值：

transition-property:规定设置过渡效果的 CSS 属性的名称。（none / all / property）

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）

transition-delay:定义过渡效果何时开始。

不过区别于Transition，Animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。
语法如下：

animation: name duration timing-function delay iteration-count direction;

具体的属性值：
animation-name：规定需要绑定到选择器的 keyframe 名称。（keyframename、none）

animation-duration：规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function： 规定动画的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）
animation-delay： 规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction： 规定是否应该轮流反向播放动画。 （normal、alternate）