html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

CSS的animation属性使用实例讲解_Div+Css教程

[ ] 已经帮助:人解决问题

   一、animation的语法 eKgHTML5中文学习网 - HTML5先行者学习网

  1、@keyframes——插入关键帧eKgHTML5中文学习网 - HTML5先行者学习网

  (1)FormTo形式:eKgHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板eKgHTML5中文学习网 - HTML5先行者学习网

  @keyframes demo {eKgHTML5中文学习网 - HTML5先行者学习网

  from {eKgHTML5中文学习网 - HTML5先行者学习网

  Properties:Properties value;eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  Percentage {eKgHTML5中文学习网 - HTML5先行者学习网

  Properties:Properties value;eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  to {eKgHTML5中文学习网 - HTML5先行者学习网

  Properties:Properties value;eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  (2)百分比的形式:eKgHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板eKgHTML5中文学习网 - HTML5先行者学习网

  @keyframes demo {eKgHTML5中文学习网 - HTML5先行者学习网

  0% {eKgHTML5中文学习网 - HTML5先行者学习网

  Properties:Properties value;eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  Percentage {eKgHTML5中文学习网 - HTML5先行者学习网

  Properties:Properties value;eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  100% {eKgHTML5中文学习网 - HTML5先行者学习网

  Properties:Properties value;eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  }eKgHTML5中文学习网 - HTML5先行者学习网

  2、animation-name——定义动画的名称eKgHTML5中文学习网 - HTML5先行者学习网

  animation-name: none | “动画的名称”;eKgHTML5中文学习网 - HTML5先行者学习网

  (1)动画的名称是由Keyframes创建的动画名,这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果eKgHTML5中文学习网 - HTML5先行者学习网

  (2)none为默认值,当值为none时,将没有任何动画效果eKgHTML5中文学习网 - HTML5先行者学习网

  3、animation-durationeKgHTML5中文学习网 - HTML5先行者学习网

  animation-duration: time (s)eKgHTML5中文学习网 - HTML5先行者学习网

  animation-duration是指定元素播放动画所持续的时间,取值为数值,单位为秒(s),其默认值为“0”。eKgHTML5中文学习网 - HTML5先行者学习网

  4、animation-timing-functioneKgHTML5中文学习网 - HTML5先行者学习网

  animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)eKgHTML5中文学习网 - HTML5先行者学习网

  animation-timing-function是用来指定动画的播放方式,具有以下六种变换方式:ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。eKgHTML5中文学习网 - HTML5先行者学习网

  5、animation-delayeKgHTML5中文学习网 - HTML5先行者学习网

  animation-delay: time(s)eKgHTML5中文学习网 - HTML5先行者学习网

  animation-delay:是用来指定元素动画开始时间。取值为数值,单位为秒(s),其默认值为“0”。这个属性和animation-duration使用方法是一样的。eKgHTML5中文学习网 - HTML5先行者学习网

  6、animation-iteration-counteKgHTML5中文学习网 - HTML5先行者学习网

  animation-iteration-count:infinite || numbereKgHTML5中文学习网 - HTML5先行者学习网

  animation-iteration-count是指定元素播放动画的循环次数,其取值为数字,默认值为“1”或者infinite(无限次数循环)。eKgHTML5中文学习网 - HTML5先行者学习网

  7、animation-directioneKgHTML5中文学习网 - HTML5先行者学习网

  animation-direction: normal || alternateeKgHTML5中文学习网 - HTML5先行者学习网

  animation-direction是指定元素动画播放的方向,如果是normal,那么动画的每次循环都是向前播放;如果是alternate,那么动画播放在第偶数次向前播放,第奇数次向反方向播放。eKgHTML5中文学习网 - HTML5先行者学习网

  8、animation-play-stateeKgHTML5中文学习网 - HTML5先行者学习网

  animation-play-state:running || pausedeKgHTML5中文学习网 - HTML5先行者学习网

  animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused,其中running为默认值。这个属性目前很少内核支持,所以只是稍微提一下。eKgHTML5中文学习网 - HTML5先行者学习网

  二、animation事件接口eKgHTML5中文学习网 - HTML5先行者学习网

  其实目前基本的就是三个事件而已:开始、迭代、结束。开始和结束都知道是什么意思。至于这个迭代,由于animation中有个iteration-count属性,它可以定义动画重复的次数,因此动画会有许多次开始和结束。但是真正的“开始”和“结束”事件是关于整个动画的,他们只会触发一次,而中间由于重复动画引起的“结束并开始下一次”将触发整个“迭代”事件。eKgHTML5中文学习网 - HTML5先行者学习网

  这三个事件的标准名称是:eKgHTML5中文学习网 - HTML5先行者学习网

  开始:animationstarteKgHTML5中文学习网 - HTML5先行者学习网

  迭代:animationiterationeKgHTML5中文学习网 - HTML5先行者学习网

  结束:animationendeKgHTML5中文学习网 - HTML5先行者学习网

  但是目前版本的Chrome需要加上webkit前缀,而且还要注意大小写eKgHTML5中文学习网 - HTML5先行者学习网

  开始:webkitAnimationStarteKgHTML5中文学习网 - HTML5先行者学习网

  迭代:webkitAnimationIterationeKgHTML5中文学习网 - HTML5先行者学习网

  结束:webkitAnimationEndeKgHTML5中文学习网 - HTML5先行者学习网

  最后是实例代码和截图eKgHTML5中文学习网 - HTML5先行者学习网

 CSS Code复制内容到剪贴板eKgHTML5中文学习网 - HTML5先行者学习网

  1. <style>
  2. @-webkit-keyframes test {
  3. 0% {background:red;}
  4. 25% {background:green;}
  5. 50% {background:blue;}
  6. 100% {background:red;}
  7. }
  8. @keyframes test {
  9. 0% {background:red;}
  10. 25% {background:green;}
  11. 50% {background:blue;}
  12. 100% {background:red;}
  13. }
  14. </style>
  15. <script>
  16. onload=function(){
  17. var html=document.documentElement;
  18. //定义事件回调函数
  19. var start=function(){
  20. console.log("start");
  21. },iteration=function(e){
  22. console.log(e);
  23. },end=function(){
  24. console.log("end");
  25. };
  26. //绑定事件
  27. html.addEventListener("webkitAnimationIteration",iteration);
  28. html.addEventListener("animationiteration",iteration);
  29. html.addEventListener("webkitAnimationStart",start);
  30. html.addEventListener("animationstart",start);
  31. html.addEventListener("webkitAnimationEnd",end);
  32. html.addEventListener("animationend",end);
  33. //开始执行动画
  34. html.style.animation=
  35. html.style.WebkitAnimation=
  36. "test 1s linear 0s 3";
  37. };
  38. </script
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助