30分钟玩转css3动画， transition，animation
其实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>