CSS3 - Transition - 说中

CSS3 Transition

css属性值在一定时间内平滑地过渡；

transition主要包含四个属性值：

transition-property

执行变换的属性；应用所有属性用all；

transition-duration

动画持续的时间；注意要加单位s或者ms

transition-timing-function

在延续时间段，变换的速率变化；包括：

ease：默认项，动画效果慢慢开始然后加速，到中点后再减速最后缓慢到达终点

ease-in-out：与ease类似，加减速更柔和一些

ease-in：开始比较慢，但是加速和停止曲线比较陡峭

ease-out：开始较快，然后缓慢停止

linear：线性平均速率，通常在color和opacity属性的变化上

cubic-bezier函数：自定义速度模式 可以使用工具：http://cubic-bezier.com/#.17,.67,.83,.67

transition-delay

变换延迟时间；delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。

transition需要事件触发，所以没法在网页加载时自动发生。

例：

简写：

img{
    transition: 1s 1s height ease;
    -webkit-transition: 1s 1s height ease;
}

单独写：

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

transition的高级写法：

p#animate {
    width: 10em;
    background-color: #F00;
    border-radius: 5px;
    transition-property: width, border-radius, background-color;
    transition-duration: 1s, 2s;
    transition-timing-function:  ease, ease-out, linear;
}

p#animate:hover {
    width: 20em;
    background-color: #00F;
    border-radius: 50%;
}

注意其中的transition-duration只写了两个，那么第三个transition-property属性background-color就用循环到第一个，也就是说他的transition-duration值是1s；

注意要写transition的兼容写法:

p {
  -webkit-transition: all .5s ease-in-out 1s;
  -o-transition: all .5s ease-in-out 1s;
  -moz-transition: all .5s ease-in-out 1s;
  transition: all .5s ease-in-out 1s;
}

用CSS3 Transition制作的效果:  http://leaverou.github.io/animatable/

 

参考资料：

http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

http://www.w3cplus.com/content/css3-transform

http://beiyuu.com/css3-animation/

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html