初级前端的自我救赎【HTML+CSS篇】：14.css3动画属性

最新推荐文章于 2024-03-31 11:49:36 发布

努力更加努力

最新推荐文章于 2024-03-31 11:49:36 发布

阅读量78

点赞数

文章标签： css css3 动画

本文链接：https://blog.csdn.net/weixin_44088319/article/details/120520998

版权

动画属性（animation）：
animation-name:规定需要帮规定到选择器的keyframe名称。
animation-duration:规定完成冬花所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟
animation-iteration-count:规定动画应该播放的次数


定义动画
@keyframes anim{
    0%{
        transform:translate(0px,0px)
    }
    100%{
        transform:translate(900px,100px)
    }
} 


如果定义的是0%到50% 动画执行时间为10秒 则前5秒会执行0%到50% 后5秒会执行50%到0%
若希望动画平滑无限循环 则可以将0%与100%值设为相同
百分比可以看作时间帧

简写 animation:动画名 动画持续时间 动画函数 动画延迟 动画播放次数(infinite无限次数)

<!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>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px auto;
            animation: anim 10s ease 1s infinite;
        }

        /* keyfram定义一个动画 */
        @keyframes  anim{
            0%{
                transform:rotate(0deg);
                width: 100px;
                height: 100px;
                
            }
            20%{
                width: 200px;
                height: 200px;
                transform:rotate(360deg)
            
            }
            40%{
                background-color: yellow;
                width: 300px;
                height: 300px;
            }
            100%{
                transform:rotate(0deg);
                width: 100px;
                height: 100px;
            }
        }

        .box:hover{
            animation-play-state: paused;
        }
        /* from to 等于 0%到100% */
        @keyframes fromAnim{
            from{
                transform: scale(0);
            }
            to{
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

努力更加努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初级前端的自我救赎【HTML+CSS篇】：14.css3动画属性

动画属性（animation）：animation-name:规定需要帮规定到选择器的keyframe名称。animation-duration:规定完成冬花所花费的时间，以秒或毫秒计。animation-timing-function:规定动画的速度曲线。animation-delay：规定在动画开始之前的延迟animation-iteration-count:规定动画应该播放的次数定义动画@keyframes anim{ 0%{ transform:transl
复制链接

扫一扫