标签定义及应用申明
应用@keyframes划定规矩，你能够建立动画。
建立动画是经由过程逐渐转变从一个CSS款式设定到另一个。
在动画过程当中，您能够变动CSS款式的设定屡次。
指定的变化时发作时应用％，或关键字"from"和"to"，这是和0％到100％雷同。
0％是开首动画，100％是当动画完成。（引荐进修：CSS3视频教程。）
为了取得最好的浏览器支撑，您应当一直定义为0％和100％的选择器。
注重: 应用animation属性来掌握动画的表面，还应用选择器绑定动画。.
语法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 |
申明 |
| animationname |
必须的。定义animation的称号。 |
| keyframes-selector |
必须的。动画持续时间的百分比。 正当值： 0-100% 注重： 您能够用一个动画keyframes-selectors。 |
| css-styles |
必须的。一个或多个正当的CSS款式属性 |
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
div
{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>
<p><strong>注重:</strong> @keyframes 划定规矩不兼容 IE 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>
以上就是应用css3动画须要应用什么划定规矩的细致内容，更多请关注ki4网别的相干文章！
