CSS3之transition

Javascript是单线程执行的，代码是一句一句执行的，而异步任务，如定时器或者动画，会被压入执行队列，在线程空闲时执行。在CSS3动画出现之前，我们通常使用定时器和Javascript实现动画效果，但是由于Javascript单线程执行，很容易发生动画卡顿，效果较差。CSS3提供的过渡（transition）、动画（animation）、变换（transform）能比较好的为我们展现不同的动画效果，因此有必要对其进行了解、学习，本篇开始介绍CSS3之过渡。

CSS过渡支持我们在改变CSS属性时控制动画的变化效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

CSS过渡在独立于Javascript执行线程的另一个线程里执行，Javascript的执行不会阻塞CSS动画，使得应用动画效果更加流畅。

    transition: [property] [duration] [timing-function] [delay];

• property，属性名称；

• duration，过渡动画持续的时间；

• timing-function，动画执行时间变化函数；

  关于动画变化函数更多，请查看https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

  • ease-in，动画变化逐渐变快；

  • ease-out，动画变化逐渐变慢；

  • ease-in-out，动画先逐渐变快然后逐渐变慢；

  • linear，线性动画变换；

  • cubic-bezire(x1, y1, x2, y2)，定义动画时间变化曲线

  • step(number, type)，定义动画变化区段块

• delay，过渡动画属性变化延迟执行时间。

注：可以一次声明多个过渡变化，以逗号分隔。

我们可以通过CSS过渡子属性分别控制CSS3过渡动画模块：

• transition-property：定义将要使用CSS3过渡动画的单个或多个CSS属性名称

• transition-duration：定义发生过渡动画的单个或多个CSS属性所对应过渡动画执行所需时间

• transition-timing-function：定义CSS3过渡动画过程中属性值与时间的变化函数

• transition-delay： 定义过渡动画属性变化延迟执行时间

观看CSS3过渡实例请进入

html代码：

    
    
The box below combines transitions for: width, height, background-color, transform. Hover or click over the box to see these properties animated.
    单击触发过渡动画
    


    
    

CSS样式：

    .box {            border: 1px solid #FFCCCC;            display: block;            width: 100px;            height: 100px;            background-color: #0000FF;            -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;            transition: width 2s, height 2s, background-color 2s, transform 2s;
        }        .box:hover {            background-color: #FFCCCC;            width: 200px;            height: 200px;            -webkit-transform: rotate(180deg);            transform: rotate(180deg);
        }        .trans.box {            background-color: #FF0000;            width: 300px;            height: 300px;            -webkit-transform: rotate(270deg);            transform: rotate(270deg);
        }

CSS属性发生过渡变化时，除了会执行CSS相应的指定变化，还会在完成时触发transitionend事件。

transitionend 事件在 CSS 完成过渡后触发。如果过渡在完成前移除，例如transition-property属性被移除，此事件将不被触发。

语法如下：

    
    // Safari 3.1 到 6.0 
    object.addEventListener("webkitTransitionEnd", myscript); 
    // 标准方式
    object.addEventListener("transitionend", myscript);

无限弹动小球实例地址

html代码：

css样式：

    * {            margin: 0;            padding: 0
        }        html, body {            width: 100%:
            height: 100%;
        }        .ball {            background-color: blue;            width: 100px;            height: 100px;            position: absolute;            top: 30px;            left: 20px;            border-radius: 50px;
        }        .floor {            position: absolute;            bottom: 10px;            left: 0;            width: 100%;
        }

Javascript代码：

本篇对CSS3过渡进行了基本讲解和拓展，并给出了两个实例，供参考。

作者：惊鸿三世
链接：https://www.jianshu.com/p/d068341fdcac