CSS3动画基础学习之transition部分

阮老师的学习教程

transition（过渡）

这个transition的参数有很多选项后面再详细说明。首先最基本的是一个时间，如下代码，表示的是完成这个动画需要多久。

transition: 1s;

那么这个属性应该设置在何处好。
我自己验证的效果是，这个属性放在动画元素和动画操作上都行，就比如hover的这个动画来说。
transition: 1s 这个属性放在动画元素div上面,无论是鼠标进入还是出来都可以实现一个1s的过程。
而放在hover伪类上面，就仅仅是鼠标进入div时候有1s过程，移开鼠标却是瞬间恢复。
可以找一个图片这样试试，效果更佳，记得设置图片display: inline-block

<style>
    div {
        border:1px solid #333333;width: 100px; height: 100px;
      }
    div:hover { 
      width: 300px;
      height: 300px;
      }    
</style>
<div></div>

也可以给指定的属性加上动画时间，比如上面的transition可以改为

transition: 1s width;//1s height , 1s all都可以

当然也可以同时设置多个属性的动画时间

transition: 1s width,1s height;

再加入一个transition-delay方法（属性）。表示延时多长时间后再进行动画。

transition: 1s 1s width;//这个第二个1s就是delay方法（属性）

再加入一个transition-timing-function的方法。状态变化速度方法，如下的示例

transition: 1s ease;//ease 就是一个 状态变化速度方法，默认放慢变化速度，是默认属性
ease : 慢速开始，然后变快，慢速结束   === cubic-bezier(0.25,0.1,0.25，0.1)
//除了这个还有
linear : 匀速 == cubic-bezier(0,0,1,1)
ease-in: 加速 == cubic-bezier(0.42,0,1,1)
ease-out:  减速 == cubic-bezier(0,0,0.58,1)
ease-out-in : 慢速开始，慢速结束 cubic-bezier(0.42,0,0.58,1)
cubic-bezier: 自定义速度模式

cubic-bezier自定义网站
上面几种状态变化速度曲线：

image.png

将以上的几部分整合起来，然后实现一个延时1s后经过1s的时间将div的长度由100px→300px，状态变化速度为ease的代码片段：

transition: 1s 1s width ease;
//分解
transition-property: width;
transition-duration: 1s;
transition-delay: 1s;
transition-timing:-function: ease;

以上是小弟一些粗略见解，如果有大佬路过，还望指点一二。