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．列表： ■如果想让所有属性都持续一个时间，那就写一个值。 ■ 如果想让每个属性持续不同的时间那就写一个时间的列表。

举例：

css 复制代码

        .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;

二.动画

结构：

css 复制代码

       /* 定义一个动画（定义一组关键帧）------ 第一种方式 */
        @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：设置动画延迟

css 复制代码

        .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：指定动画的播放次数，

常用值如下：

number：动画循环次数

infinite：无限循环

animation-direction：指定动画方向

常用值如下：

normal: 正常方向（默认）

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

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

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

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

常用值如下：

running：运动（默认）

paused：暂停

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

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