今天自己摸索了一下css3动画的写法，主要是兼容w3c和WebKit引擎写法。以下是我简单的实现了一个循环播放的家在动画，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chasing dot</title>
<style type="text/css">
.spiner{//定义容器
margin:100px auto;
width:40px;
height:40px;
position:relative;
text-align:center;
-webkit-animation:rotate 2s infinite linear;//容器加载旋转动画，用时2s，无限循环，线性速度
animation:rotate 2s infinite linear;
}
.dot1, .dot2{//定义运动元素 可以采用伪元素来代替
position: absolute;
width:60%;
height:60%;
display:inline-block;
top:0;
background-color:#333;
border-radius:100%;
-webkit-animation: zoom 2s infinite linear;//运动加载缩放动画，用时2S,无限循环，线性速度
animation: zoom 2s infinite linear;
}
.dot2{
top:auto;
bottom:0;
-webkit-animation-delay:-1.0s;
animation-delay:-1.0s;
}
@-webkit-keyframes rotate{//定义旋转动画（兼容WebKit写法）
100%{-webkit-transform:rotate(360deg)}
}
@keyframes rotate{//兼容w3c写法
100%{
transform:rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes zoom{//定义缩放动画（兼容WebKit写法）
0%,100%{-webkit-transform:scale(0.0)}
50%{-webkit-transform:scale(1.0)}
}
@keyframes zoom{//兼容W3C写法
0%,100%{
transform:scale(0.0);
-webkit-transform:scale(0.0);
}
50%{
transform:scale(1.0);
-webkit-transform:scale(1.0);
}
}
</style>
</head>
<body>
<div class="spiner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</body>
</html>
效果为：
其中，动画的运动速度是参数：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
是不是很明了，记录一下，go on,fighting!
时间： 2024-10-12 12:23:56