动画animation

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

# 1.定义动画的步骤

(1)通过@keyframes定义动画;

(2)将这段动画通过百分比,分割成多个节点;然后各节点中分别定义各属性;

(3)在指定元素里,通过 animation 属性调用动画。

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

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

# 2.animation属性

  1. 动画名称:
animation-name: move;
  1. 执行一次动画的持续时间:
animation-duration: 4s;

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

  1. 动画的执行次数:
animation-iteration-count: 1;       //iteration的含义表示迭代
  1. 动画的方向:
animation-direction: alternate;

属性值:normal 正常,alternate 反向。

  1. 动画延迟执行:
	animation-delay: 1s;
  1. 设置动画结束时,盒子的状态:
animation-fill-mode: forwards;

属性值: forwards:保持动画结束后的状态(默认), backwards:动画结束后回到最初的状态。

  1. 运动曲线:
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>

Last Updated: 12/21/2020, 12:11:13 AM