欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3 - Transition - 说中

程序员文章站 2022-04-07 11:33:09
...
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