其实css3动画是就是2种实现，一种是transition，另一种就是animation。transition实现的话就是只能定制开始帧，和结束2帧；而animation实现的话可以写很多关键帧。
没有前戏，直进主题。
transition
包含4个值，例如：-webkit-transition:all .5s ease 1s;
分别顺序是(m代表必须)： 变换的属性(m)、变换过渡的时间(m)、变换的速率、变换延时执行的时间。
来个小demo：
<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><style>.transition {width:30px;height: 30px;line-height: 30px;border-radius: 50%;text-align: center;display: inline-block;background:lightblue;-webkit-transition:all .5s ease;transition:all .5s ease;color:#fff;}.transition:hover {-webkit-transform:rotate(360deg);transform:rotate(360deg);}</style> </head> <body><div class="transition">×</div> </body> </html>
应用例子：
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html
animation：
就是一个动画对应一个keyframes，然后一个keyframes 里可以有N多个关键帧。例如一个keyframes里我们可以这样写：
@-webkit-keyframes go {0%, 100% {-webkit-transform: translateX(0);}50% {-webkit-transform: translateX(500px);} }
然后我们需要在应用这个keyframes的元素上写一个animation,
例如：-webkit-animation:go 2.5s ease infinite 0;
参数顺序分别是(m代表必须)：动画名字(m)、执行的时间(m)、过渡的速率、执行多小次、延迟执行的时间
<!DOCTYPE html> <html> <head><title></title><style>.animation {width: 100px;height: 100px;display: block;background: pink;-webkit-animation: go 2.5s infinite;/*-webkit-animation: go 2.5s cubic-bezier(.25, -0.25, .75, 1.25) infinite;*/}@-webkit-keyframes go {0%, 100% {-webkit-transform: translateX(0);}50% {-webkit-transform: translateX(500px);}}</style> </head> <body><div class="animation"></div></body> </html>
应用deom：loading状态、三条线变箭头。
http://skyweaver213.github.io/slide/widget/slide1/slide.html
<!DOCTYPE html> <html> <head><title></title><style>.loading {position: relative;width: 40px;height: 40px;margin: 40px auto;-webkit-transform:rotate(165deg);}.loading:before, .loading:after {content: '';position: absolute;width: 8px;height: 8px;top: 50%;left: 50%;display: inline-block;border-radius: 4px;-webkit-transform: translate(-50%, -50%);}.loading:before {-webkit-animation:before 2s infinite;}.loading:after {-webkit-animation:after 2s infinite;}@-webkit-keyframes before {0% {width: 8px;box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);}35% {width: 40px;box-shadow: 0 -8px rgba(225, 20, 98, 0.75), 0 8px rgba(111, 202, 220, 0.75);}70% {width: 8px;box-shadow: -16px -8px rgba(225, 20, 98, 0.75), 16px 8px rgba(111, 202, 220, 0.75);}100% {box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);}}@-webkit-keyframes after {0% {height: 8px;box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);}35% {height: 40px;box-shadow:8px 0 rgba(61, 184, 143, 0.75),-8px 0 rgba(233, 169, 32, 0.75);}70% {height: 8px;box-shadow: 8px -16px rgba(61, 184, 143, 0.75), -8px 16px rgba(233, 169, 32, 0.75);}100% {box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);}}</style> </head> <body><div class="loading"></div> </body> </html>
变换成箭头：
<!DOCTYPE html> <html> <head><title></title><style>* {margin:0;padding:0;}.arrow_div {width: 100px;height: 100px;background: #000;position: relative;}.arrow {width: 33px;height: 4px;display: inline-block;background: #fff;position: absolute;left:0;right:0;}.arrow_body {margin: auto;top:40px;-webkit-animation: 2s linear body_kf infinite;}@-webkit-keyframes body_kf {0% {}30%, 50% {-webkit-transform: rotate(180deg);}80%, 100% {-webkit-transform: rotate(360deg);}}.sleft {width: 33px;height: 33px;border: transparent;position: absolute;top: 25px;margin: 0 auto;left: 0;right: 0;-webkit-animation: 2s linear sleft_kf infinite;}.sleft:before {content: '';width: 33px;height: 4px;display: inline-block;background: #fff;top: 0;position: absolute;-webkit-animation: 2s linear sleft_before_kf infinite;}@-webkit-keyframes sleft_kf {0% {}30%, 50% {-webkit-transform: rotate(222deg);}80%,100% {-webkit-transform: rotate(360deg);}}@-webkit-keyframes sleft_before_kf {0%, 100%{}20% {width: 28px;top: 1px;left: 3px;}25% {width: 26px;top: 2px;left: 6px;}30%, 40%, 50% {width: 22px;top: 3px;left: 8px;}80% {width: 33px;top:0;left:0;}}.sright {width: 33px;height: 33px;border: transparent;position: absolute;margin: 0 auto;left: 0;right: 0;top: 25px;position: absolute;-webkit-animation: 2s linear sright_kf infinite;}.sright:before {content: '';width: 33px;height: 4px;display: inline-block;background: #fff;bottom: 0;position: absolute;-webkit-animation: 2s linear sright_before_kf infinite;}@-webkit-keyframes sright_kf {0% {}30%, 50% {-webkit-transform: rotate(135deg);}80%,100% {-webkit-transform: rotate(360deg);}}@-webkit-keyframes sright_before_kf {0%,100% {}20% {width: 28px;bottom: 1px;right: 1px;}25% {width: 25px;bottom: 2px;right: 2px;}30%, 40%, 50% {width: 22px;bottom: 3px;right: 3px;}80% {width: 33px;bottom: 0;right:0;}}</style> </head> <body><div class="arrow_div"><div class="sleft"></div><i class="arrow arrow_body"></i><div class="sright"></div></div> </body> </html>