CSS过渡、变形与动画

一、过度

定义：元素从一种样式逐渐改变为另一种的效果。

语法规则：

选择器{
    transition:property duration timing-function delay
}
tansition属性实现简单的动画效果
transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性

  div{
      transition: width 2s;
   }

二、transiton子属性

duration：定义过渡效果花费的时间

取值：
time值：以秒或毫秒计，默认是0，意味着没有任何效果

timing-function：规定过渡效果的时间曲线
取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值

delay：规定开始之前需要等待的时间
取值：
time值：以秒或毫秒计，默认是0

三、变形

定义：transform属性允许对元素应用2D转换

语法规则：

选择器{
    transfor