CSS的animation动画

最新推荐文章于 2024-09-04 17:17:13 发布

谦谦q

最新推荐文章于 2024-09-04 17:17:13 发布

阅读量1.1k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/hey_myx/article/details/119727956

版权

CSS动画
对于animation动画的使用：
1.定义关键帧
2.@keyframes 自定义的名称{
from{
css的属性值、多个
}
to{
css的属性值、多个
}
}
@keyframes username{
0%{}
20%{}
60%{}
100%{}
}
3.调用关键帧
选择器{
动画：开始状态、结束状态 ---->自己的默认状态
animation-name:user-defined-name;/引入的关键帧/
animation-duraction:3s;/动画时长/
animation-name: move; /回到了初始状态/
animation-duration: 4s; /对于时长，若不写，默认0s/
animation-iteration-count: 3; /* 重复次数，默认1次 /
animation-iteration-count: infinite; /无穷无尽一直循环 /
animation-delay: 2s; / 默认:0s s ms 动画开始之前的延时，自己的默认状态/
animation-direction: reverse; /反转 to—>from/
animation-direction: normal; / 正常情况下：from—>to /
animation-direction: alternate; /交替 from–>to–>from–>to…/
animation-direction: alternate-reverse; / 反转交替 to–>from–>to—>from… /
执行状态：2s 自己的状态—》to–>from–>to–>from–》自己的状态
animation-play-state: paused; / 暂停、恢复默认值是running，与js搭配使用 /
animation-fill-mode: none; / 填充模式：延时、动画结束之后:自己的的状态 /
animation-fill-mode: forwards; / 执行状态：2s自己的状态—》to–>from–>to–>from–》自己的状态 /
animation-fill-mode: backwards; / 执行状态：2s to—》to–>from–>to–>from–》自己的状态 /
animation-fill-mode: both; / 填充模式：延时使用的是第一帧，最后一帧 */
animation-timing-function: linear; /*动画时长里的运动速度 /
}
animation-timing-function 动画的速度曲线
（1）ease 默认值，先快后慢
（2）linear 线性增长，匀速
（3）ease-in 先慢后快
（4）ease-out 先快后慢
（5）ease-in-out 先慢后快再慢
animation: change 3s; /*至少写两个：动画名称和动画时长 /
animation: change 3s 2s; / 如果出现时间，第一个是动画时长第二个是延时时长其他随便写 */

<style>
        .one,.two{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            float: left;
            background-color: thistle;
        }
        @keyframes move{
            from{
                margin-left: 100px;
                background-color: turquoise;
            }
            to{
                margin-left: 10px;
                background-color: tomato;
                width: 100px;
                height: 100px;
            }
        }
        .one{
           /*  动画：开始状态、结束状态 ---->自己的默认状态  */
           animation-name: move;  /*回到了初始状态*/
           animation-duration: 4s;  /*对于时长，若不写，默认0s*/
           animation-iteration-count: 3; /* 重复次数，默认1次 */
           animation-delay: 2s; /* 默认：0s s ms    动画开始之前的延时，自己的默认状态*/
           animation-direction: alternate;  /*交替  from-->to-->from-->to.....*/
           }
        .two{
         animation: change 3s;/*至少写两个：动画名称和动画时长*/
         animation: change 3s 2s;  /* 如果出现时间，第一个是动画时长  第二个是延时时长  其他随便写 */
        }
        @keyframes change{
            0%{margin-top: 100px;}
            25%{margin-top: 20px;}
            50%{margin-top: 70px; opacity: 0.3;/*透明度*/}
            100%{margin-top: 10px;}
            /* 像小球弹动效果 */
        }
        @keyframes jump{
            0%{width: 100px;}
            25%{width: 25px;}
            60%{width: 70px;}
            100%{width: 300px;}
        }
        .three, .four,.five{
            width: 10px;
            height: 50px;
            background-color: teal;
            margin: 10px;
        }
        .three{
            animation: jump 4s 2s backwards 3 reverse;
        }
        .four{
            animation: jump 2s forwards 4 alternate;
        }
        .five{
            animation: jump 3s both infinite  alternate-reverse linear;
            /* animation: jump 3s both infinite  alternate-reverse steps(4)  steps是步长的意思 */
        }
        .six{
            width: 200px;
            height: 180px;
            background-color: teal;
            /* overflow: hidden;   隐藏超出背景的图片 */
        }
        .six>img{
            /* margin-left: -600px; */
            animation: walk 1s infinite steps(8);
        }
        @keyframes walk{
            0%{width: 100px;}
            25%{width: 25px;}
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
</body>