过渡 动画

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

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

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

• 指定效果的持续时间。

如果未指定的期限，transition 将没有任何效果，因为默认值是 0。

速度曲线

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

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

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

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

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

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

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

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

展示了可以使用的一些不同的速度曲线：

transition-timing-function: linear; 规定从开始到结束具有相同速度的过渡效果

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

transition-timing-function: ease-in;规定缓慢开始的过渡效果

transition-timing-function: ease-out; 规定缓慢结束的过渡效果

transition-timing-function: ease-in-out;规定开始和结束较慢的过渡效果

延迟过渡效果

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

transition-delay: 1s; 在启动之前有 1 秒的延迟

 

简写属性

 transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 2s;

简写： transition: width 2s linear 2s;

什么是 CSS 动画？

animation-name：定义动画的名字

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

animation-duration: 4s;  动画将持续 4 秒钟

动画里面from代表0%   to代表100%。同时动画里面也可以用百分比代替。

延迟动画

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

animation-delay: 2s;在开始动画前有 2 秒的延迟。

运行次数

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

animation-iteration-count: 3;在停止前动画将运行 3 次。

反向或交替运行动画

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

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

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

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

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

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

 animation-direction: reverse;这个实例中，将以相反的方向（向后）运行动画。

填充模式

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

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

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

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

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

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

animation-fill-mode: forwards; 元素在动画结束时保留来自最后一个关键帧的样式值。  

简写属性

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

以上样式可以简写为： animation: example 4s linear 2s infinite alternate;