CSS3中的动画知识点整理

动画

动画和过渡的区别

• 动画和过渡类似，都是可以实现一些动态的效果；
• 不同的是过渡需要在某个事件来触发，而动画可以自动触发动态效果；
• 设置动画效果，必须先要设置一个关键帧（@keyframes），关键帧设置了动画执行每一个步骤。

动画的概念

在IE9及以下不兼容

动画是使元素从一种样式逐渐变化为另一种样式的效果。我们还可以设置不同的样式、时间和次数等。

使用 @keyframes 创建动画，此外还需要把相应的动画名绑定到一个选择器中，否则创建的动画是不会有任何效果的。

语法：

• 创建动画：@keyframes 动画名称 { }
• 使用动画：animation: 动画名称 时长

上面的动画名称和持续时间必须定义。如果省略时间，动画将无法运行，因为默认值是0。

我们可以使用关键词 from 和 to、百分比来规定动画的变化样式。

/* 2.使用动画 */
p {
  animation: 动画名称 1s;
}

/* 1.创建动画 */
/* 关键词 from 和 to */
@keyframes 动画名称{
  /* 动画的起始位置 */
  from {
		/* 操作 */
  }
  /* 动画的结束位置 */
  to {
		/* 操作 */
  }
}

/* 百分比 */
@keyframes 动画名称{
  /* 动画的起始位置 */
  0% {
  	/* 操作 */
  }
  /* 动画的结束位置 */
  100% {
  	/* 操作 */  
 	}
}

动画的连写形式

当然上面的动画是简写形式的，我们也可以使用连写形式。

下面将拆分讲解单个设计动画的属性。

动画名称

animation-name 设置动画的名称。

比如：animation-name: test;

动画执行时间

animation-duration 设置动画的执行时间，也就是动画完成一个周期所花费的时间。

比如：animation-duration: 4s;

动画的速度曲线

animation-timing-function 设置动画以什么方式来完成一个周期。

可以设置的值：

• ease：先加速在减速，默认
• ease-in：加速
• ease-out：减速
• ease-in-out：以低速开始和结束
• linear：匀速
• steps(int,start|end)：间隔数量 (步长)
  • int：间隔数，是一个正整数（大于 0）
  • start：可选，动画的第一帧会被立即执行，直接从第二帧开始，然后以第一帧结束
  • end：可选，从第一帧开始到正常结束，默认
• cubic-bezier(n,n,n,n)：设置自己想要的值，值可以是从 0 到 1 的数值

动画的延时

animation-delay 设置动画什么时候开始，也就是延迟时间是多久 。 (默认是0)

比如：animation-delay: 2s;

动画运行的方向

animation-direction 设置动画运行的方向。

• normal ：正常播放动画，默认
• reverse：逆序播放动画
• alternate：奇数 次 正常 播放动画，偶数 次 逆序 播放动画
• alternate-reverse：奇数 次 逆序 播放动画，偶数 次 正常 播放动画

动画执行的次数

animation-iteration-count 设置动画执行的次数 。（默认是1）

• 数值：具体的整数
• infinite：无限循环

比如：animation-iteration-count: 1;

动画的执行状态

animation-play-state 设置动画的执行状态

• running：执行，默认
• paused：暂停

动画执行完毕时的状态

animation-fill-mode 设置动画执行完毕时的状态

• none：回到初始位置，默认
• forwards：停止结束的位置（第一帧状态）
• backwards：动画延时等待时，元素就会处于开始位置（最后一帧状态）
• both：结合了forwards 和 backwards

简写

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态（部分先后，除了时间）

animation: test 2s 2 1s alternate;

兼容问题

• -moz-: 支持 Firefox 更早的版本
• -webkit-: 支持 Chrome 和 Safari 更早版本
• -o-：支持 Opera 更早的版本

@keyframes myfirst 
    /* 操作 */
}
/* Safari 与 Chrome */
@-webkit-keyframes myfirst {
    /* 操作 */
}

p {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  /* Safari 与 Chrome: */
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}

p {
  animation: myfirst 5s linear 2s infinite alternate running;
  -webkit-animation: myfirst 5s linear 2s infinite alternate running;
}