css复杂动画（animation属性）
程序员文章站
2022-05-18 20:26:07
1、声明：@keyframes name{ }； 2、涉及到的属性 animation-name：动画名称 animation-duration：单次动画总时长 animation-timing-function：时间函数 animation-delay：播放前延时的时长 animation-ite ......
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>
得到的效果：
上一篇： jvm学习（2）JVM内存说明
推荐阅读
-
利用css3-animation实现逐帧动画效果
-
Android属性动画Property Animation系列一之ObjectAnimator_html/css_WEB-ITnose
-
css3的动画特效之动画序列（animation）
-
基于CSS3 animation动画属性实现轮播图效果
-
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
-
css3的动画特效之动画序列（animation）
-
CSS3中Animation动画属性用法详解
-
CSS3中Transition动画属性用法详解
-
CSS3 animation实现逐帧动画效果
-
基于CSS3 animation动画属性实现轮播图效果