标签：for round add width 效果 时长 绑定 ima html
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3动画</title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: red; animation: myfirst 5s; /*规定动画的名称:myfirst 规定动画的时长: 5s*/ -webkit-animation: myfirst 5s; } @-webkit-keyframes myfirst { from {background: red} to {background: yellow} } keyframes myfirst { form {background: red} to {background: yellow} } </style> </head> <body> <div></div> </body> </html>
标签：for round add width 效果 时长 绑定 ima html
原文地址：https://www.cnblogs.com/qjuly/p/9053626.html
