CSS3学习笔记（十三）——transition动画

本质：是在一定时间之内，一组css属性变换到另一组属性的动画展示过程。

• transition-property ：要以动画展示哪些属性，可以使用all关键字

• transition-duration：动画过程有多久

• transition-timing-function：控制动画速度变化（linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等）

  函数	功能描述
  ease	从初始状态到终止状态，速度由快到慢，逐渐减慢
  linear	从初始状态到终止状态，恒速变化
  ease-in	从初始状态到终止状态，加速变化
  ease-out	从初始状态到终止状态，减速变化
  ease-in-out	从初始状态到终止状态，先加速，再减速

•  transition-delay：动画是否延迟执行

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-propertity: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;
}
div:hover {
  width: 400px;
}

a{
 transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;
}

 

 笔记整理出自：https://www.imooc.com/learn/33

http://www.cnblogs.com/bobodeboke/p/6252869.html