CSS基础-CSS3动画

前言

通过CSS3动画属性，我们可以创建动画，实现简单的动画效果。

---

CSS3动画

CSS3动画的实现需要用到animation属性并配合关键帧 @keyframes{}使用。
1.对需要设置动画的元素添加animation属性。
2.设置关键帧@keyframes{}。

（1）animation属性

animation是所有动画属性的简写属性，除了 animation-play-state 属性，常用的写法：animation:关键帧的名称 动画运动的时间 动画运行的类型 动画延迟的时间;

以下是animation包含的常用属性：

animation-name

给需要设置动画的元素添加动画名称，名称可以调用对应的关键帧。
例如：animation-name:movie; @keyframes movie{};
设置元素的动画的名称为movie,该元素执行@keyframes设置的动画效果

animation-duration

设置动画持续的时间，默认为0，可以设置秒或毫秒。
例如：animation-duration: 1s;
动画时间持续1s

animation-timing-function

设置动画运动的类型，默认值为ease:动画以低速开始，然后加快，在结束前变慢。
其他属性：
linear:匀速；
ease-in：动画以低速开始；
ease-out： 动画以低速结束；
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：贝塞尔曲线，可能的值是从 0 到 1 的数值；
例如：animation-timing-function：linear;
动画运动类型为匀速运动。

animation-delay

设置动画的延迟，默认是0，可以设置秒或毫秒。
例如：animation-delay:1s;
元素延迟1s后出现动画效果。

animation-iteration-count

设置动画的运动次数，默认值为1，动画运动次数为1次。
其他属性：
infinite:无限循环
例如：animation-iteration-count:3;
动画效果执行三次。

animation-direction

设置动画运动的方向，默认值为normal。
其他属性：
reverse:反方向运行（让关键帧从后往前执行）；
alternate:动画先正常运行再反方向运行；
alternate-reverse：动画先反方向运行再正向运行，并持续交替；

（2）animation-play-state

控制动画的运行或暂停，默认值为running：运行;
其他属性：
paused:暂停；
例：p:hover {animation-play-state:paused;}
鼠标滑过p时动画暂停。

（3）@keyframes{}

格式：
1：@keyframes 动画的名称{
from{初始状态属性}
to{结束状态属性}
}

2：@keyframes 动画的名称{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}

这里我们常用第二种，因为第二种相对更加灵活。

---

补充：@keyframes浏览器不支持问题

CSS3在不同浏览器中可能会出现不支持，效果无法实现的情况，这时我们一般加上对应的浏览器前缀:
IE: @-ms-keyframes
Opear: @-o-keyframes
Firefox: @-moz-keyframes
Safari和Chrome: @-webkit-keyframes