CSS3动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。1.动画的基本使用制作动画分为两步：1.先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)2.元素使用动画...

慢谷

5462人浏览 · 2021-11-25 20:53:49

慢谷 · 2021-11-25 20:53:49 发布

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

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

1.动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

2.元素使用动画

<!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>动画animation</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1.定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画序列 👇

<!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>动画序列</title>
    <style>
        /* 动画序列 */
        /* 1.可以做多个状态的变化  keyframe 关键帧 */
        /* 2.里面的百分比是整数 */
        /* 3.里面的百分比就是总的时间的划分 */
        @keyframes move {
            /* 0%的内容可以不写，也可以直接不写0% */
           0% {

           }
           25% {
               transform: translate(1000px, 0);
           }
           50% {
               transform: translate(1000px, 200px);
           }
           75% {
               transform: translate(0px, 200px);
           }
           100% {
               transform: translate(0, 0);
           }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 10s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画常用属性

速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是“ease”

<!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>速度曲线步长</title>
    <style>
       div{
           font-size: 20px;
           width: 0;
           height: 30px;
           background-color: pink;
           /* steps就是分几步来完成我们的动画 有了steps就不用再写ease或者linear了 */
           animation: move 4s steps(10) forwards;
       }
       @keyframes move{
           0% {
               width: 0;
           }
           100% {
               width: 200px;
           }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!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>CSS3动画常用属性</title>
    <style>
        @keyframes move {
           0% {
                transform: translate(0, 0);
           }
           100% {
               transform: translate(1000px, 0);
           }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 5s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复的   count 次数  infinite无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放  默认normal  想反方向就写alternate*/
            /* animation-direction: alternate; */
            /* 动画结束后状态默认backwards  回到起始状态 我们可以让他停留在结束状态forwards */
            animation-fill-mode: forwards;
        }
        div:hover {
            /* 鼠标经过div 让这个div 停止动画， 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

· 简写属性里面不包含animation-play-state

· 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用

· 想要动画走回去，而不是直接跳回来：animation-direction: alternate

· 盒子动画结束后，停在结束位置：animation-fill-mode: forwards