css3动画知识点
杨龙飞
杨龙飞
杨龙飞
杨龙飞
杨龙飞
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
无限循环动画
.content .light{position:absolute;right:0px;background:white;-webkit-animation: twinkling1 1s infinite ease-in-out;animation: twinkling1 1s infinite ease-in-out;box-sizing:border-box;border:3px solid white;}
@keyframes twinkling1 {
100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
@-moz-keyframes twinkling1 /* Firefox */
{
100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
@-webkit-keyframes twinkling1 /* Safari 和 Chrome */
{
100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
@-o-keyframes twinkling1 /* Opera */
{
100% {width:20px;height:20px;border-radius:50%;background:yellow;visibility: hidden;border-color:rgb(255,65,34);}
66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color:white;}
33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34);}
0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color:rgb(255,65,34);}
}
