css之动画使用（详解）

最新推荐文章于 2024-06-25 10:37:03 发布

Ys.q

最新推荐文章于 2024-06-25 10:37:03 发布

阅读量215

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_61940160/article/details/131992578

版权

闲话少说直接进入正题

基础知识巩固：

     1. animation-name ：xxx (我们的动画名称)；

     2. animation-duration : 2s  (动画的持续时间为2s)；

     3. animation-timing-function :  linear  (动画运动的曲线)；

        匀速： linear

        低速开始—>加速—>结束前减速 ：ease （系统默认）

        以低速开始 ：ease-in 

        以低速结束 ：ease-out

        以低速开始和结束 ： ease-in-out

     4. animation-delay :  1s (动画等待1s后开始)；

     5. animatiom-iteration-count :  1 (动画播放次数为1次)；
        /* 循环播放*/
        无限次执行 : infinite

     6. animation-direction :  nomal (设置动画执行规则)；

        系统默认 :   nomal 

        往返动画，执行完一次之后往回执行下一次 : alternate

        反向执行 ： reverse

     7. animation-fill-mode :  none (动画结束的最后一帧)；

        不做任何改变 :  none

        让元素结束状态保持动画最后一帧的样式 : forwards

        让元素等待状态的时候显示动画第一帧的样式 : backwards

        等待状态显示第一帧，结束状态保持最后一帧 : both

     8. animation-fill-mode :  none (设置动画是否暂停)；

        执行动画:  running

        暂停动画:  paused

动画使用简写：

animation：动画名称、时间、运动曲线、等待时长、播放次数、执行规则、动画帧、是否暂停。

<!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>
        .box{
            margin: 0 auto;
            color: white;
            text-align: center;
            height: 50px;
            line-height: 50px;
            background-color: red;
            cursor: pointer;
            /*关键代码*/ 
            animation:mymove 5s linear  forwards;
        }
        /* 动画关键帧 */
        .box:hover {
            /* 设置动画是否暂停*/
            animation-play-state: paused;
        }
        @keyframes mymove{
                           from {width: 0px;}
                            to  {width: 100%;}
                        };   
        /* @keyframes mymove{
                            0% {width: 0px;}
                            25% {width: 25%;}
                            50% {width: 50%;}
                            75% {width: 75%;}
                            100% {width: 100%;}
                        } */
                   
    </style>
</head>
<body>
    <div class="box">测试效果,只做演示使用</div>
</body>
</html>