lovecoding
/
VIP32


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 200px;
            height: 200px;
            background: #00f;
            margin: 100px auto;
            animation: run 3s linear 2s infinite normal forwards running;
        }

        @keyframes run {
            from {
                /* width: 200px; */
                transform: rotateZ(0deg);
            }
            20% {
                /* width: 220px; */
                transform: rotateZ(20deg);
            }
            40% {
                /* width: 240px; */
                transform: rotateZ(40deg);
            }
            60% {
                /* width: 260px; */
                transform: rotateZ(60deg);
            }
            80% {
                /* width: 280px; */
                transform: rotateZ(80deg);
            }
            to {
                /* width: 300px; */
                transform: rotateZ(100deg);
            }
        }
    </style>
</head>
<body>
    <!-- 
        animation 动画
        自执行 ：用于实现关键帧动画式的风格
        -webkit-animation：name  duration  timing-function  delay  iteration-count direction fill-mode play-state
        1.animation-name 用来定义一个动画的名称，transition-name相同
        2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同
        3.animation-timing-function：动画的播放方法，transition-easing相同　　　
        4.animation-delay:动画的延迟时间；
        5.animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；
        6.animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；
        7.animation-fill-mode:  用于设置动画结束后的停留点（forwards:表示停留在最后一个点上  backwards:表示停留在第一个点上  默认值:none  both:介于最后和开始之间/动画结束或开始的状态）
        8.animation-play-state: paused(动画已暂停)|running(动画正在播放);
        ""关键帧动画必须由@keyframes来引出""
        @keyframes 动画名称(name){
        执行代码块（0%==from   100%==to）[关键帧动画的单位必须是百分比]
        }
        关键帧动画可以设置不同时段的百分比效果

        transition与animation区别

        transition: 过渡平滑的动画   最多4个参数  最少1个（all）
        animation:  关键帧	最长8个参数  最少2个


     -->
     <div id="box"></div>
</body>
</html>