css之动画使用（详解）

小小前端

已于 2023-06-08 10:30:19 修改

阅读量1.6k

点赞数 1

文章标签： css 动画 css3

于 2022-11-26 18:31:05 首次发布

本文链接：https://blog.csdn.net/jw_xiaoming/article/details/128054732

版权

闲话我们就不说了，我们直接接入我们的主题：

基础知识巩固：

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>

效果展示：