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 一般单独使用。