当前位置：网站首页>动画，及动画的基本使用

动画，及动画的基本使用

2022-07-21 14:26:00 【Dummerd】

一.动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

二.动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

1.用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称{

0%{

width:100px

}

100%{

width:200px

}

动画序列

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列

在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或者用关键词‘form’和‘to’，等同于0%和100%

关于例句如下代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* from和to等价于0%和100% */

        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 动画名称  */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 4s;
        }



        /* 定义动画      动画自己起的名称 */
        /* @keyframes   move{ */
        /* 开始状态 */
        /* 0% 或者 */
        /* from  {
        transform: translateX(0px);
    }
           结束状态     100% 或者 */
        /* to { 
        transform: translateX(1000px);
    }   
}  */

        /* 规定动画 */
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0);
            }

        }
    </style>

</head>

<body>

    <div>
    </div>
</body>

</html>

三.动画中常用的属性