很多前端开发者可能和我一样，对于css3的动画写的不多，遇到产品强制加特技，赶紧上网搜案例！呵呵哒！当然作为乘着HTML5热潮的前端开发者，不会手写几个高逼格的动画，你怎么和老革命家划清界限呢？对吧！来上马！
今天我呢，带着大家做一个加载的动画效果！
说到动画就要用到animation啦，来饿补一下：
描述
animation-name
规定需要绑定到选择器的 keyframe 名称。。
animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。
animation-delay
规定在动画开始之前的延迟。
animation-iteration-count
规定动画应该播放的次数。
animation-direction
规定是否应该轮流反向播放动画。
原谅我借用一下w3cschool的资源哈，不过建议大家去菜鸟教程看文档，会比较全，当然对着官方文档效果会更好一些。
看一下整页的代码:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><style type="text/css">.div1{ border-radius:50px; width:100px; height:100px; background:red; left: 0; top: 0; position:absolute; animation-name:myfirst1; animation-duration:5s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari and Chrome: */
-webkit-animation-name:myfirst1; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;
}.div2{ border-radius:50px; width:100px; height:100px; left:200px
top:0px; background:yellow; position:absolute; animation-name:myfirst2; animation-duration:5s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari and Chrome: */
-webkit-animation-name:myfirst2; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;
}.div3{ border-radius:50px; width:100px; height:100px; left:200px
top:200px; background:blue; position:absolute; animation-name:myfirst3; animation-duration:5s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari and Chrome: */
-webkit-animation-name:myfirst3; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;
}.div4{ border-radius:50px; width:100px; height:100px; left:0px
top:200px; background:green; position:absolute; animation-name:myfirst4; animation-duration:5s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari and Chrome: */
-webkit-animation-name:myfirst4; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;
}
@keyframes myfirst1
{
0% {background:red; left:300px; top:300px;}
25% {background:yellow; left:500px; top:300px;}
50% {background:blue; left:500px; top:500px;}
75% {background:green; left:300px; top:500px;}
100% {background:red; left:300px; top:300px;}
}
@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
0% {background:red; left:300px; top:300px;}
25% {background:yellow; left:500px; top:300px;}
50% {background:blue; left:500px; top:500px;}
75% {background:green; left:300px; top:500px;}
100% {background:red; left:300px; top:300px;}
}
@keyframes myfirst2
{
0% {background:yellow; left:500px; top:300px;}
25% {background:blue; left:500px; top:500px;}
50% {background:green; left:300px; top:500px;}
75% {background:red; left:300px; top:300px;}
100% {background:yellow; left:500px; top:300px;}
}
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0% {background:yellow; left:500px; top:300px;}
25% {background:blue; left:500px; top:500px;}
50% {background:green; left:300px; top:500px;}
75% {background:red; left:300px; top:300px;}
100% {background:yellow; left:500px; top:300px;}
}
@keyframes myfirst3
{
0% {background:blue; left:500px; top:500px;}
25% {background:green; left:300px; top:500px;}
50% {background:red; left:300px; top:300px;}
75% {background:yellow; left:500px; top:300px;}
100% {background:blue; left:500px; top:500px;}
}
@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
0% {background:blue; left:500px; top:500px;}
25% {background:green; left:300px; top:500px;}
50% {background:red; left:300px; top:300px;}
75% {background:yellow; left:500px; top:300px;}
100% {background:blue; left:500px; top:500px;}
}
@keyframes myfirst4
{
0% {background:green; left:300px; top:500px;}
25% {background:red; left:300px; top:300px;}
50% {background:yellow; left:500px; top:300px;}
75% {background:blue; left:500px; top:500px;}
100% {background:green; left:300px; top:500px;}
}
@-webkit-keyframes myfirst4 /* Safari and Chrome */
{
0% {background:green; left:300px; top:500px;}
25% {background:red; left:300px; top:300px;}
50% {background:yellow; left:500px; top:300px;}
75% {background:blue; left:500px; top:500px;}
100% {background:green; left:300px; top:500px;}
}</style><body style=""><div class="Center-Container">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div></div></body></html>html的结构很简单哈，精华都在css里了，有兴趣的童鞋复制下来运行一下，还是有点逼格的哈，这次分享的是平面动画，下次给大家来个炫酷的3d效果！加特技 不收费！
作者：TracySoke
链接：https://www.jianshu.com/p/a7c640441d32
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦