过渡和动画

过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。       

它是如何工作的？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性

• 指定效果的持续时间。

多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔。

速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

• linear - 规定从开始到结束具有相同速度的过渡效果

• ease-in -规定缓慢开始的过渡效果

• ease-out - 规定缓慢结束的过渡效果

• ease-in-out - 规定开始和结束较慢的过渡效果

• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）

动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

 

延迟动画

animation-delay 属性规定动画开始的延迟时间。

运行次数

animation-iteration-count 属性指定动画应运行的次数。

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值

• reverse - 动画以反方向播放（向后）

• alternate - 动画先向前播放，然后向后

• alternate-reverse - 动画先向后播放，然后向前

速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

• linear - 规定从开始到结束的速度相同的动画

• ease-in - 规定慢速开始的动画

• ease-out - 规定慢速结束的动画

• ease-in-out - 指定开始和结束较慢的动画

• cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。

• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。

• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

简写属性

实例：

div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

以上样式可以简写为：

div {
  animation: example 4s linear 2s infinite alternate;
}