个人笔记

动画animation

动画是可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。

# 1.定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。

    定义动画：
        @keyframes 动画名{
            from{ 初始状态 }
            to{ 结束状态 }
        }

     调用：
      animation: 动画名称 持续时间；

# 2.animation属性

动画名称：

animation-name: move;

执行一次动画的持续时间：

animation-duration: 4s;

上面两个属性，是必选项，且顺序固定。

动画的执行次数：

animation-iteration-count: 1;       //iteration的含义表示迭代

动画的方向：

animation-direction: alternate;

属性值：normal 正常，alternate 反向。

动画延迟执行：

	animation-delay: 1s;

设置动画结束时，盒子的状态：

animation-fill-mode: forwards;

属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。

运动曲线：

animation-timing-function: ease-in;

属性值可以是：linear ease-in-out 等

综合缩写

 animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行;(infinite 表示无限次)

 animation: move1 1s  alternate linear 3;

 animation: move2 4s;

举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: red;

            /* 调用动画*/
            /* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*/
            /*animation: move 1s  alternate linear 3;*/
            animation: move2 4s;
        }

        /* 方式一：定义一组动画*/
        @keyframes move1 {
            from {
                transform: translateX(0px) rotate(0deg);
            }
            to {
                transform: translateX(500px) rotate(555deg);
            }
        }

        /* 方式二：定义多组动画*/
        @keyframes move2 {
            0% {
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }

            25% {
                transform: translateX(500px) translateY(0px);

            }

            /*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/
            50% {
                /* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */
                transform: translateX(500px) translateY(200px);
                background-color: green;
                border-radius: 50%;
            }

            75% {
                transform: translateX(0px) translateY(200px);
            }

            /*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/
            100% {
                /*坐标归零，表示回到原点。*/
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

← 过渡 flex →