CSS过渡和动画

一.过渡

1.定义：将CSS的属性值在一段时间内平缓变化的过程给体现出来；

2.指定过渡属性

  2.1作用：指定哪个或者哪几个属性值，在变化时需要使用过渡效果来体现；

2.2属性：transition-property取值：属性名 例子：transition-property:background;

2.3注意：允许设置过渡效果的属性如下

颜色属性，取值为数字的属性，转换属性（transform），渐变属性，阴影属性，visibility属性

3.指定过渡时长

  3.1作用：指定在多长时间内完成过渡操作

  3.2 属性：transition-duration 取值：s/ms

4.指定过渡速度时间函数

  4.1属性 transition-timing-function

  4.2取值：（1）默认值，ease表示慢速开始快速变化 慢速结束（2）linear匀速（3）ease-in 慢速开始 匀速结束（4）ease-out 快速开始慢速结束（速率与1不同）（5）ease-in-out 慢速开始和结束

5.指定过渡延迟时间 transition-delay:时间

6.过渡的编写位置

   6.1允许将过渡属性编写在元素声明的样式中;

   6.2 触发过渡效果样式中（hover）

二．动画

1.定义：使元素从一种样式逐渐变化为另一种样式，动画是复杂的过渡效果。动画是通过关键帧来控制动画的每一步。

关键帧：在某个时间点上，元素的状态和样式是怎样的。

2.动画的使用步骤：

  2.1声明动画：

@keyframes 动画名称{

 /* 定义该动画中所有的关键桢*/

0%{动画开始时的样式}

100{动画结束时的样式}

}

3.动画属性

  3.1 animation-name 指定动画的名称

  3.2 animation-duration 指定动画执行的一个周期的时长

  3.3animation-timing-function

  3.4 animation-delay

  3.5animation-iteration-count  作用：指定动画的播放次数；取值：1.具体数值；2.infinite 无限次

3.6.animation-direction 指定动画的播放方向；normal 正常播放 alternate轮流播放，偶数次时正向播放，奇数次时逆袭播放

动画的简洁写法：animation: name duration timing-function delay iteration-countdirection

3.7 animation-fill-mode

定义：规定动画在播放前和播放后的状态；

取值：3.7.1 none：默认行为 不改变；3.7.2 forwards当动画完成后，保持在最后一个帧的状态上；3.7.3 backwards 在动画播放前的延迟时间内，动画将保持在第一帧的状态；3.7.4 both: forwards+backwards

3.8 animation-play-state:指定动画的播放状态

取值：pasuse 动画暂停；running: 动画播放