CSS3 实现动画
通过@keyf「ames规则可以创建动画，原理是将一套CSS样式逐步从当前的样式更改为新的样式。
使用@keyframes创建动画时，需要把它绑定到一个选择器，否则动画不会有任何效果。需要指定至少两个CSS3的动画属性：规定动画的名称，规定动画的时长。
下面通过一个实例来理解CSS3动画。
【例题】创建CSS3动画
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1{
width: 200px;
height: 200px;
background: blue;
animation:myFirstAni 5s;
transform: rotate(0deg);
margin:20px;
}
@keyframes myFirstAni{
0%{margin-left: 0px;background: blue;transform: rotate(0deg);}
50%{margin-left: 500px;background: red;transform: rotate(720deg);}
100%{margin-left: 0px;background: blue;transform: rotate(0deg);}
}
.d2{
width: 200px;
height: 200px;
background: red;
animation:mySecondtAni 5s;
transform: rotate(0deg);
margin:20px;
}
@keyframes mySecondtAni{
0%{margin-left: 0px;background: red;transform: rotateY(0deg);}
50%{margin-left: 500px;background: blue;transform: rotateY(720deg);}
100%{margin-left: 0px;background: red;transform: rotateY(0deg);}
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
点击加载更多评论>>