<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telphone=no" name="format-detection"> <title>切入切出动画</title> <link media="all" href="http://www.w3cplus.com/mcommon/reset.css" rel="stylesheet"> <style type="text/css"> .demo{ background-color: #333; height: 300px; width: 800px; margin: 0 auto;} .demo2{ background-color: #333; height: 300px; width: 800px; margin:10px auto;} .left-in, .left-out { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes left-in { 0% { -webkit-transform: translate3d(-2000px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes left-in { 0% { transform: translate3d(-2000px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .left-in { -webkit-animation-name: left-in; animation-name: left-in; } @-webkit-keyframes left-out { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-2000px, 0, 0); } } @keyframes left-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-2000px, 0, 0); } } .left-out { -webkit-animation-name: left-out; animation-name: left-out; } </style> </head> <body> <div class="demo left-in"></div> <div class="demo2 left-out"></div> </body> </html>
transition动画与animation动画的区别在于：
1、transition动画只能定义开始和结束位置，中间无法定义；而keyframes则可以定义n帧作为中间的过渡帧。
2、对于切入切出动画来说，transition动画我们只需添加删除一个class即可完成，而animation动画则需要切换两个class，再在最后删除class，比较复杂。
3、如果你的动画不需要定制中间帧，那直接使用transition动画即可，切换一个class就可以了，运动结束时候可以js调用transitionend函数，而如果需要定制中间帧，那么还是animation，当然animation的事件有三个animationstart，animationiteration，animationend
原文链接：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-slider-animation.html