css3关于animate动画的使用
程序员文章站
2022-03-01 20:54:27
...
关于animate动画语法：
animate：动画名称 花费时间 运动曲线 等待时间 播放次数(无限播放) 是否反向播放animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。
那么如何声明动画呢？????
@keyframes 动画名称{
from{
/*需要执行的动画效果*/
}
to{
/*需要执行的动画效果*/
}
/*同时也可以使用百分比*/
/*例如：*/
0%{
/*需要执行的动画效果*/
}
50%{
/*需要执行的动画效果*/
}
100%{
/*需要执行的动画效果*/
}
}
下面来个加载效果实例：????
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
position: absolute;
top: 200px;
left: 500px;
width: 50px;
height: 50px;
/*border: 1px solid red;*/
}
div span {
display: inline-block;
height: 10px;
width: 10px;
background-color: red;
position: absolute;
border-radius: 50%;
}
.div2 {
transform: rotate(45deg);
}
@keyframes dh {
0% {
transform: scale(0.5);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0.5);
}
}
div span {
animation: dh 1s linear infinite;
}
.div1 .span1 {
left: 0;
top: 0;
animation-delay: 0s;
}
.div2 .span1 {
left: 0;
top: 0;
animation-delay: 0.125s;
}
.div1 .span2 {
top: 0;
right: 0;
animation-delay: 0.25s;
}
.div2 .span2 {
top: 0;
right: 0;
animation-delay: 0.375s;
}
.div1 .span3 {
bottom: 0;
right: 0;
animation-delay: 0.5s;
}
.div2 .span3 {
bottom: 0;
right: 0;
animation-delay: 0.625s;
}
.div1 .span4 {
bottom: 0;
left: 0;
animation-delay: 0.75s;
}
.div2 .span4 {
bottom: 0;
left: 0;
animation-delay: 0.875s;
}
</style>
</head>
<body>
<div class="div1">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
<span class="span4"></span>
</div>
<div class="div2">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
<span class="span4"></span>
</div>
</body>
</html>
注：很重要的一点就是一定要算好动画的时间，时间冲突就达不到想要的效果
最终效果图????
上一篇： Oracle小节
下一篇： 归纳CSS3的动画属性
推荐阅读