移动端----切入切出动画 

<!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

posted @ 2015-03-24 11:07  webfby  阅读(698)  评论(0)  编辑  收藏  举报