过渡动画 transition

动画过渡效果可以制作淡入淡出, 由大变小, 改变色彩等动画.

1. 过渡相关属性

• transition-property：要过渡的CSS属性

  • 如果是all表示应用到所有CSS属性

• transition-duration：过渡持续的时间, 单元是秒

• transition-timing-function：过渡速度的变化方式，值有：

   #div1 {transition-timing-function: linear;}  /*匀速*/
   #div2 {transition-timing-function: ease;}  /*缓慢*/
   #div3 {transition-timing-function: ease-in;}  /*慢入*/
   #div4 {transition-timing-function: ease-out;}  /*慢出速*/
   #div5 {transition-timing-function: ease-in-out;}  /*开始和结束缓慢*/
  

• transition-delay：延迟时间, 单元是秒.

  • 如果为负数，过渡动画将会在半路结束

• 多个属性组合使用:

   div {-webkit-transition: width 2s, height 2s, -webkit-transform 2s;}
  

2. 注意事项

• 不同时间段内过渡不同属性

• 解决主流浏览器的兼容问题，添加前缀可以正常使用

  // 谷歌 苹果Safari
  -webkit-transition: width 2s, height 4s; 
  
  // IE9
  -ms-transition: width 2s, height 4s; 
  
  // 火狐
  -moz-transition: width 2s, height 4s;
  
  // 欧朋
  -o-transition: width 2s, height 4s;
  

• 谁要做动画就给谁加transition

3. 过渡动画Demo

• 给按钮添加样式

• 给按钮添加一个悬停样式

• 添加过渡动画