css3实践之图片轮播（Transform，Transition和Animation）

　　楼主喜欢追求视觉上的享受，虽常以牺牲性能没法兼容为代价却也乐此不疲。本文就经过一个个的demo演示来简单了解下css3下的Transform，Transition和Animation。

　　本文须要实现效果：（请用chrome打开）

1. 图片轮播
2. 图片自动轮播

Transform

　　根据个人理解，transform和width、height、background同样，都是dom的属性，不一样的是它是css3旗下的，比较屌，可以对原来的dom元素进行移动、缩放、转动、拉长或拉伸，跟canvas上的某些api神似，这么说来transform好像能干些js才能干的事。

　　transform分2D变换和3D变换，w3school中有很好的介绍和例子，具体请猛戳：CSS3 2D 转换  CSS3 3D 转换

　　为了方便查找，我把w3school上的截图在这里保存一份：

Transition

　　transition的解释是过渡，个人理解是css之间的变换，可是这个变换很屌很平滑，相似动画。举个栗子，一开始某个dom的类是classA，经过某种操做（好比被点击了）后变成了classB，若是没有transition，类之间的变换是很快的，机械般瞬间完成，可是有了transition，这便会是一个很缓和平滑的过程。

　　咱们经过demo来说解transition的使用方式。

　　写好以下的html文件：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>  
<img src='http://hanzichi.github.io/img/img0.png' />

　　打开来是很是简单的一张图，加上css：

img {
  -webkit-transition: all 1s ease-in-out 0s;
}

img:hover {
  -webkit-transform: 
    rotate(360deg)
    scale(0.5, 0.5);

  opacity: 0;
}

　　效果请猛戳：transition变换 （ps：全部demo都没有作兼容 请用chrome打开）

　　是否很简单？demo中，你只需设定好图片（img标签）原先的属性和hover后的属性，中间的变换过程全由transition搞定！而transition加在某个元素下（demo的transition加在img标签下），仿佛设置了一个监听器，一旦该元素的属性值即将要发生变化，就会自动检查transition中的设定的属性，一旦发现相匹配，则进行平滑的过渡。

　　transition有4个属性，语法：transition: property duration timing-function delay  从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”（默认值：all 0 ease 0 前两个是必须的 后两个可省略）。

　　若是不是全部属性都要进行平滑过渡，或者各属性过渡的时间、速度等设置各有需求，能够把要过渡的属性用逗号隔开，demo可写成：

img {
  -webkit-transition: 
    -webkit-transform 1s ease-in-out 0s,
    opacity 1s ease-in-out 1s;
}

img:hover {
  -webkit-transform: 
    rotate(360deg)
    scale(0.5, 0.5);

  opacity: 0;
}

　　若是非得把transition的四个属性分开来写，能够这样：

img {
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-delay: 0s;
}

　　我把后三个属性放在一块儿只写了一个值（由于值同样），你也能够像property同样分开来写用逗号隔开。

　　这里再介绍下timing-function的取值。六大取值：（仍是盗图w3cschool）

• transition中的hover

　　相信你们实践了transition后，对于transition究竟是直接写在选择器上，仍是写在选择器的hover上会表示疑惑，彷佛效果同样。其实否则，若是对于通常的hover，也就是鼠标hover先后的过程是为逆过程的话，两种写法效果一致，可是若是hover先后效果不同的话，transition须要分别加在选择器的hover先后，好比这个demo：猛戳看demo

　　也就是说若是hover先后须要不同的效果，就能够分别写两个transition。好比鼠标hover时颜色渐入2s，hover后渐出5s->猛戳demo

 　　

　　小结：通常transition应用在dom的class变换中，可先行写好机械的变换，而后添加过渡效果。

Animation

　　Animation的解释是动画，增强版的transition。

　　若是说transition能实现某些js效果，animation就更像是js了。相似于写一个canvas特效，特效总共好比说多少时间，咱们能规定在何时该出现什么样的场景，而各个场景间的转换则彻底由css3自己负责，而keyframes比如定义了一个js方法。

 　　主要应用在某个元素须要进行连续的n次css变换。一个简单的demo以下：animation动画

　　咱们在@keyframes 中建立动画时，请把它捆绑到某个选择器，不然不会产生动画效果。

　　经过规定至少如下两项 CSS3 动画属性，便可将动画绑定到选择器：

1. 规定动画的名称
2. 规定动画的时长

demo代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  img {
    /*-webkit-animation: myfirst 5s;*/
  }
  
  @-webkit-keyframes myfirst
  {
    0% {
      -webkit-transform: 
        rotate(0deg)
        scale(1, 1);
      opacity: 1;
    }
    
    50% {
      -webkit-transform: 
        rotate(360deg)
        scale(0.5, 0.5);
      opacity: 0.5;
    }
    
    100% {
      -webkit-transform: 
        rotate(0deg)
        scale(1, 1)
        translate(300px, 200px);
      opacity: 1;
    }
  }

  img {
    -webkit-animation: myfirst 5s linear 0s 1 alternate;
    /*停在结束位置*/
    -webkit-animation-fill-mode: forwards;
  }
</style>  
<img src='http://hanzichi.github.io/img/img0.png' />

View Code

更多请猛戳 CSS3 动画

具体应用：图片轮播

　　相似应用可先写好无过渡的代码，而后再在class转换之间添加transition。

　　该demo（图片自动轮播）和transition有关的核心代码就几行，而js只是简单的对元素的class进行赋值，动画过程全由css3完成！

img {
  position: absolute;
  -webkit-transition: all 2s ease-out;
}

.disappear {
  opacity: 0;
}

.show {
  opacity: 1;
}

　　当img的class从show转换成disappear或者从disappear转换成show时（img标签下的class变换），就会执行transition设置的过渡动画。

　　另外一个demo的实现也大同小异，有兴趣的能够参考源码：源码请猛戳

总结

　　总的来讲，transform只是为dom增添一些属性，而若是搭配transition或者animation则能完成一些动画效果，我以为实际应用较多的应该仍是transition，可配合伪类或者click等事件。

　　楼主对以上的理解不深，若有出入，还请指出。

　　如需了解更多，能够参考这篇 CSS3 Transitions, Transforms和Animation使用简介与应用展现