animation属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes zhuan {
            0%{transform: rotate(0)}
            /*3%{transform: rotate(180deg)}*/
            100%{transform: rotate(360deg)}
        }
        #box{
            width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto 0;
            animation: zhuan 5s linear 2s infinite;
        }
    </style>
</head>
<body>
    <div id="box">cjsd</div>
</body>
</html>

animation是动画属性,animation制作动画需要两步，首先用@keyframes声明动画，再用animation调用动画

@keyframes后边跟着动画名称，在这里的动画名称是zhuan

transform属性： 

translate：移动

rotate：旋转多少度

scale：放大或缩小几倍

书写内容用from和to,或者0%和100%，from相当于0%，to相当于100%，这里0的百分号不可以省略

animation的顺序是：名称 周期时间 速度 延迟时间 播放次数

linear是匀速，infinite是一直转

posted @ 2021-11-12 12:44  仙女会长高  阅读(221)  评论(0)    收藏  举报