CCS过渡

• 过渡能让使用过渡的元素在样式发生变化时(例如鼠标划过，单击按钮，点击图片时，颜色，尺寸，位置等样式发生变化)，定义变化过程中的动画，让变化不再是瞬间产生。

• 过渡样式使用transition定义，一共有四个属性

1. transition-property:过渡属性，比如color, opacity, width等所有可以在css中使用的属性
2. transition-duration:过渡持续时间
3. transition-timing-function：过渡速度，比如linear是匀速
4. transition-delay：过渡延迟，0表示立即开始

.tl:hover {
  color: red;
  font-size: 18px;
}
.tl {
  transition-property: color font-size;//可以定义多个属性同时过渡,或者使用all代表所有变化的属性
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

也可以写到一起:

.tl:hover {
  color: red;
  font-size: 18px;
}
.tl {
  transition: font-size linear 2s 0s, color linear 4s 0s 
}

注意多个属性可以定义不同的过渡效果，用逗号隔开，时间一定要带单位，比如0s不能写成0

CCS过渡

原文：https://www.cnblogs.com/cowboybusy/p/11517235.html