css_22_过渡动画

一.过渡

transition-property

• 作用：定义哪个属性需要过渡。
• 结构：

transition-property: all;

• 常用值：
  1.none：不过渡任何属性。
  2.all：过渡所有能过渡的属性。
  3．具体某个属性名，例如：width、heigth，若有多个以逗号分隔。

transition-duration

• 作用：设置过渡的持续时间。
• 结构：

transition-duration: 1s;

• 常用值：
  1.0：没有任何过渡时间﹣﹣默认值。
  2.s或ms：秒或毫秒。 3．列表： ■如果想让所有属性都持续一个时间，那就写一个值。 ■ 如果想让每个属性持续不同的时间那就写一个时间的列表。

举例：

        .box1 {width: 200px;height: 200px;background-color: orange;opacity: 0.5;/* 设置哪个属性需要过渡效果 */transition-property: width,height,background-color;/* 让所有能过渡的属性，都过渡 */transition-property: all;/* 分别设置时间 */transition-duration: 1s,1s,1s;/* 设置一个时间，所有人都用 */transition-duration: 1s;}

transition-delay

• 作用：指定开始过渡的延迟时间，
• 单位：s或ms

transition-timing-function

• 作用：设置过渡的类型

• 常用值：
  1.ease：平滑过渡﹣- 默认值
  2.linear：线性过渡
  3.ease-in：慢一快
  4.ease-out：快→慢
  5.ease-in-out：慢→快一慢
  6.step-start：等同于steps(1,start)
  7.step-end：等同于 steps(1,end)
  8.steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。
  9.cubic-bezie (number,number, number, number):特定的贝塞尔曲线

transition 复合属性

• 如果设置了一个时间，表示 duration；如果设置了两个时间，第一是 duration，第二个是delay；其他值没有顺序要求。

transition:1s 1s linear all;

二.动画

• 结构：

       /* 定义一个动画（定义一组关键帧）—— 第一种方式 */@keyframes 动画名 {/* 第一帧 */from {}/* 最后一帧 */to {transform: translate(900px);background-color: red;}}/* 定义一个动画（定义一组关键帧）—— 第二种方式 */@keyframes 动画名 {/* 第一帧 */0% {}/* 最后一帧 */100% {transform: translate(900px) rotate(360deg);background-color: purple;border-radius: 50%;}

• 具体属性：
  animation-name：给元素指定具体的动画（具体的关键帧）
  animation-duration：设置动画所需时间
  animation-delay：设置动画延迟

        .inner {/* 应用动画到元素 */animation-name: 动画名;/* 动画持续的时间 */animation-duration: 3s;/* 动画延迟时间 */animation-delay: 0.2s;}

• animation-timing-function：设置动画的类型。

常用值如下：
1.ease：平滑动画﹣﹣默认值
2.linear：线性过渡
3.ease-in：慢→快
4.ease-out：快→慢
5.ease-in-out：慢→快→慢
6.step-start：等同于 steps(1,start)
7.step-end：等同于 steps(1,end)
8.steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。
9.cubic-bezie (number, number,number, number).

• animation-iteration-count：指定动画的播放次数，

常用值如下：

1. number：动画循环次数
2. infinite：无限循环

• animation-direction：指定动画方向

常用值如下：

1. normal: 正常方向（默认）
2. reverse：反方向运行
3. alternate：动画先正常运行再反方向运行，并持续交替运行
4. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

• animation-fill-mode：设置动画之外的状态

1. forwards：设置对象状态为动画结束时的状态
   2.backwards：设置对象状态为动画开始时的状态

• animation-play-state：设置动画的播放状态，

常用值如下：

1. running：运动（默认）
2. paused：暂停

• 复合属性
  只设置一个时间表示duration，设置两个时间分别是：duration和 delay，其他属性没有数量和顺序要求。

.inner { animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards; }

备注： animation-play-state 一般单独使用。