您的位置:首页> 日志> 前端技术 正文

上篇日记,我简单介绍了css3中transition的使用,和自定义过渡中的贝塞尔曲线,效果已经很好了,但有一个比较明显的缺点就是还动画方面还不够强大,只能定义开始和结束的状态,如果我要详细控制多个阶段的动画效果,实现更多的效果应该怎么办呢,其实css3中年有专门为动画而设的属性:Animation(目前测试兼容chrome、firefox、ie10+)

Animation其实和flash中的动画差不多,有一个关键属性“keyframes”,用与定义不同阶段属性变化,下面用一个例子看看就知道了,核心代码:

  1.  @keyframes bigBoy{ 
  2.      0% { 
  3.         margin-left0width:35pxheight:35pxline-height:35pxbackground:#f07709;   
  4.      } 
  5.      50% { 
  6.         margin-left180pxwidth:70pxheight:70pxline-height:50pxbackground:#c00;  
  7.      } 
  8.      100% { 
  9.         margin-left360pxwidth:35pxheight:35pxline-height:35pxbackground:#514bad;  
  10.      } 
  11.   } 
  12.  
  13. /* 兼容webkit内核 */ 
  14.  @-webkit-keyframes bigBoy{ 
  15.      0% { 
  16.         margin-left0width:35pxheight:35pxline-height:35pxbackground:#f07709;   
  17.      } 
  18.      50% { 
  19.         margin-left180pxwidth:70pxheight:70pxline-height:50pxbackground:#c00;  
  20.      } 
  21.      100% { 
  22.         margin-left360pxwidth:35pxheight:35pxline-height:35pxbackground:#514bad;  
  23.      } 
  24.   } 
  25.  
  26. .demo:hover .box{  
  27.  
  28.      animation-name:bigBoy;/*动画属性名,也就是我们前面keyframes定义的动画名*/ 
  29.      animation-duration: 2s;/*动画持续时间*/ 
  30.      -webkit-animation-name:bigBoy;/* 兼容webkit内核 */ 
  31.      -webkit-animation-duration: 2s;/* 兼容webkit内核 */ 
  32.  
这里我们定义了一个“bigBoy”的“keyframes”,然后设置 .box 的 animation-name 对应“bigBoy”,动画持续时间2秒,那么当鼠标移到demo这个层上时,了里面的box就会动起来了。
Animation还有很多属性,具体自行百度了。
 

鼠标以上去看看效果

^_^
有了Animation,就能就很多很多动画了,是不是有点小激动呢~
 
每次写代码是不是有点麻烦?不怕这里帮到你,http://daneden.github.io/animate.css/ 这个css已经定义了常用的动画效果css,你需要做的只是用js把不同的类名加到对应div上,就有效果了。
例如:$(".box").addClass("bounce");
 
现在发挥想象力,做一个ppt试下:
( 一开始以为挺容易的,写着写着发现写了不少js,核心思路就是不断addClass、removeClass啦 )
 

开始

一个冷笑话.....

从前有一只猪

( ̄(oo) ̄)

第二天,它......

(=^_^=)

胖死了......

(⊙_⊙)

by 大话主席