Chinaunix首页 | 论坛 | 博客
  • 博客访问: 873482
  • 博文数量: 372
  • 博客积分: 10063
  • 博客等级: 中将
  • 技术积分: 4220
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-24 11:36
文章分类

全部博文(372)

文章存档

2012年(372)

分类: 虚拟化

2012-04-10 18:53:48

一、属性简介

     Transitions---CSS 变换允许CSS属性值在特定的时间段内发生变换“即当元素在大小、颜色、布局、透明度等数值改变时(请注意是数值的改变),可以使其产生过渡的动画效果,比如当元素的大小变动时,可以使用Transition将这个变动过程变得分平滑,可以增强网站的体验。

    浏览器支持:
       firefox 4+ ; opera 11+ ; chrome 10+ ; safari 5+;  其他E9 , firfox 3.6不支持该属性。
     

二: Transition对应的CSS属性列表:
      transition-property
            * 指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性。
            * 当指定为none时,动画立即停止,当指定为all的时候,则当元素产生任何属性值变化时都将执行“转换”效果,比如大小改变。
            * 初始默认值为all.
            transition-duration
            * 指定“转换”过程的时间,如:1s、none。
            * 初始默认值为0.
            transition-timing-function
            * 指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy。
            * cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。


            (贝塞尔曲线)

            贝塞尔曲线(了解更多)

            做设计的童靴对这个曲线还是很有感情的,和类似Ps中的钢笔工具。

            cubic-bezier:中的两个坐标P1 ,P2 。通过定位两个坐标来改变曲线。

    transition-delay
           * 指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”
         * 初始默认值为0.

   

详细讲解:

      属性值连写(短属性)
          * transition和background等CSS属性一样支持属性值连写,比如:-webkit-transition: width 1s easy-in-out;
          * 需要值得注意的是,原则上所有属性值是不区分位置的,但是“时间属性值”有点不同,浏览器会根据先后顺序决定,第一个可以解析为时间的属性值将体现为 transition-duration,第二个可以解析为时间的属性值将体现为transition-delay;

正确理解Timing-function

阅读(627) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~