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);}
}腾讯云开发者
