css复杂动画(animation属性)_莺语_前端开发者

1、声明:@keyframes name{   };

2、涉及到的属性

animation-name:动画名称

animation-duration:单次动画总时长

animation-timing-function:时间函数

animation-delay:播放前延时的时长

animation-iteration-count:播放次数  (特殊值:infinite 循环播放)

animation-direction:播放顺序(normal:正常播放  alternate:轮流反向播放)

3、简写animation: name duration timing-function delay iteration-count direction fill-mode;

4、例子:

    <style>
        @keyframes cart {
            from {
                left: 0;
                top: 0;
                border-radius: 0;
            }
            20% {
                left: 200px;
                top: 500px;
                transform: rotateZ(720deg);
            }
            40% {
                left: 400px;
                top: 0;
                border-radius: 50px;
            }
            60% {
                top: 500px;
                left: 600px;
                border-radius: 50%;
            }
            80% {
                top: 0px;
                left: 800px;
                border-radius: 50px;
            }
            to {
                left: 0;
                top: 0;
            }
        }
        
        .Z {
            height: 150px;
            width: 150px;
            position: relative;
            background-color: blue;
            animation: cart 10s linear 2s infinite alternate;
            transition: all 2s;
        }
        
       
    </style>
</head>

<body>
    <div class="Z">

    </div>
    <style>
        @keyframes cart {
            from {
                left: 0;
                top: 0;
                border-radius: 0;
            }
            20% {
                left: 200px;
                top: 500px;
                transform: rotateZ(720deg);
            }
            40% {
                left: 400px;
                top: 0;
                border-radius: 50px;
            }
            60% {
                top: 500px;
                left: 600px;
                border-radius: 50%;
            }
            80% {
                top: 0px;
                left: 800px;
                border-radius: 50px;
            }
            to {
                left: 0;
                top: 0;
            }
        }
        
        .Z {
            height: 150px;
            width: 150px;
            position: relative;
            background-color: blue;
            animation: cart 10s linear 2s infinite alternate;
            transition: all 2s;
        }
        
       
    </style>
</head>

<body>
    <div class="Z">

    </div>

<style>
@keyframes cart

from {
left
0
top
0
border-radius
0
20%

left
200px
top
500px
transform
rotateZ(720deg)
40%

left
400px
top
0
border-radius
50px
60%

top
500px
left
600px
border-radius
50%
80%

top
0px
left
800px
border-radius
50px
to

left
0
top
0
}

.Z
height
150px
width
150px
position
relative
background-color
blue
animation
cart 10s linear 2s infinite alternate
transition
all 2s

</style>
</head>

<body>
<div class=”Z”>

</div>

得到的效果:

» 本文来自:前端开发者 » 《css复杂动画(animation属性)_莺语_前端开发者》
» 本文链接地址:https://www.rokub.com/73424.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!