CSS3 动画—animation

2017-06-12

animation 属性目前还存在浏览器兼容性问题，建议使用 PostCSS 或手动添加浏览器前缀。本文学习使用 animation 属性创建简单动画。

animation

animation 是复合属性，其子属性有：

(1) animation-delay 动画延时
(2) animation-direction 动画在每次运行完后是反向运行还是重新回到开始位置重复运行
(3) animation-duration 动画一个周期的时长
(4) animation-iteration-count 动画重复次数，infinite无限次重复动画
(5) animation-name 指定由 @keyframes
(6) animation-timing-function 设置动画速度曲线，默认是 “ease”
(7) animation-fill-mode 指定动画执行后跳回到初始状态还是保留在结束状态
此外，还有 animation-play-state 属性，但是不能简写到 animation 属性中，该属性允许暂停和恢复动画。

基本语法

animation-name: first_animation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

/* 简写 */
animation: first_animation 5s linear 2s infinite alternate;

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

@keyframes

@keyframes 用于规定动画如何从一种样式逐渐变化为另一种样式，其基本用法如下：

@keyframes first_animation {
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

@keyframes first_animation {
  from {background: red;}
  50% { background: orange }
  to {background: yellow;}
}

关键词 “from” 和 “to”，等同于 0% 和 100%，表示动画开始状态和结束状态。中间状态由浏览器自动推算。

animation-iteration-count

animation-iteration-count 指定动画播放的次数，默认值为 1。可以指定具体的次数，也可以使用关键字 infinite 让动画无限次播放。

animation-name: first_animation;
animation-duration: 5s;
animation-iteration-count: 1;
/* 等同于 */
animation: first_animation 5s infinite;

animation-fill-mode

animation-fill-mode 指定动画执行后跳回到初始状态还是保留在结束状态。

animation-fill-mode : none | forwards | backwards | both;

none: 不改变默认行为
forwards：当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)
backwards：让动画回到第一帧的状态(在第一个关键帧中定义)
both：根据 animation-direction 轮流应用 forwards 和 backwards 规则

animation-direction

animation-direction 指定对象动画运动的方向，有以下四种取值：

normal：正常方向，默认
reverse：动画反向运行,方向始终与normal相反
alternate：动画会循环正反方向交替运动
alternate-reverse：动画从反向开始，再正反方向交替运动

animation-play-state

animation-play-state 用于手动控制动画的状态，有 paused 和 running 两种取值：

running：默认值，表示动画正常运动
paused：表示暂停动画