标签：rev 应该 mat 一个 width rect round infinite nta
之前说的过渡也是属于动画的范围，只不过它只能是开始到过渡这两个点，中间由浏览器去完成，而动画允许开发者一帧一帧的去编码。
要执行的动画都写在这个规则里
my-css是自定义的名字
@keyframes my-css{
from {top:0px;}
to {top:200px;}
}from就是之前的状态，to是之后的状态，嗯，这个其实和过渡没啥区别，这是第一种写法。
然后就是这行代码
animation: my-css 5s;完整代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
background: skyblue;
/*关键代码*/
animation: my-css 5s;
}
@keyframes my-css{
from {width:200px;}
to {width:400px;}
}
</style>
</head>
<body>
<div class="container">狠人大帝</div>
</body>
</html>这只是单纯一种属性的变化，多种属性的变化是这样的
@keyframes my-css{
from {
width:200px;
height: 200px;
background: skyblue;
}
to {width:400px;
height: 400px;
background: pink;
}
}接下来是一帧一帧的完成
@keyframes my-css{
0% {
top:0px;left: 0px;
transform: rotate(0deg);
background: skyblue;
}
25% {
left:200px;
top:0px;
transform: rotate(45deg);
background: pink;
}
50% {
top:200px;
left:200px;
transform: rotate(90deg);
background: brown;
}
75% {top: 200px;
left:0px;
transform: rotate(135deg);
background: #456920;
}
100% {top:0px;
left:0px;
transform: rotate(180deg);
background: skyblue;
}
}如此动画的编写规则就是这样，接下来看animation属性
它是多个属性的集合
animation: name duration timing-function delay iteration-count direction fill-mode play-state;以上属性如果单独使用应该加上前缀animation-
改变CSS代码
.container{
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
background: skyblue;
position: absolute;
/*关键代码*/
animation: my-css 5s 2;
animation-fill-mode: forwards;
}标签：rev 应该 mat 一个 width rect round infinite nta
原文地址：https://www.cnblogs.com/tourey-fatty/p/12094311.html
