CSS3-animation属性和@keyframes规则
animation 取值情况：
(1)name : 动画名字
(2)duration ： 动画持续的时间
(3)animation-timing-function ：定义动画以什么速度曲线完成动画
①linear ： 动画从开始到结束的速度都是一样的；
②ease : 默认值，以低速开始，然后加快，结束前变慢；
③ease-in : 动画以低速开始；
④ease-out : 动画以低速结束；
⑤ease-in-out ：动画以低速开始和结束；
⑥cubic-bezier(n,n,n,n) ：n是0到1之间的数，定义自己的速度曲线；
(4)animation-delay ：动画延迟时间，默认为0，可以取负值，单位是秒或毫秒；
(5)animation-iteration-count ：定义动画的播放次数，或无限次播放（infinite）；
(6)animation-direction : 规定动画播放方式
①normal ： 默认值，正常播放；
②reverse ：动画反向播放；
③alternate：在奇数时正常播放，偶数时反向播放；
④alternate-reverse：在奇数时反向播放，偶数时正向播放；
(7)animation-fill-mode ：
(8)animation-play-state：取值有pause（暂停）和running（运行）
@keyframes规则：
使用@keyframes规则，通过在animation指定的持续时间内（duration）将一个CSS样式变换为另一个CSS样式，从而实现动画效果。
要使用动画选择器绑定样式实现动画效果，这里的动画选择器是必须的，有：
①%：有0%，20%， 30%等。
②from：动画开始，和0%一样；
③to：动画结束，和100%一样。
CSS样式的变化至少有两个，一个开始和一个结束的样式，用关键字from或0%指定开始的CSS样式；用关键字to或100%来指定结束时的CSS样式。
也可以使用n%来定义多个CSS样式，从而使动画效果经过多个CSS样式。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red; }
25% {top:0px; left:100px; background:blue; }
50% {top:100px; left:100px; background:yellow;border-radius: 50%;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;border-radius: 50%;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
转载于:https://my.oschina.net/u/2434352/blog/858461
上一篇： 企业防御虚拟货币挖矿恶意软件攻击的十九大安全保护措施
下一篇： 软件破解中常用API