transition过渡样式

CSS

适用范围:

1. 作用:

1. 设置某个其他样式改变时候的过渡效果, 以此达到动画的效果

梗概:

transition属性是以下四个属性的缩写:

1. transition-property 指定CSS属性的name，transition效果
2. 默认全部样式
3. transition-duration⭐ transition效果需要指定多少秒或毫秒才能完成
4. child::transition-timing-function 指定transition效果的转速曲线
5. transition-delay 定义transition效果开始的时候

实例:

之一

div{
  transition: 2s
}

之一

div{
    width:100px;
    transition: width 2s;/* 设置width样式的为默认过渡效果,且持续2s */
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;} /*当width样式发生改变时,按照transition所设置的过渡样式来改变 */

1. 注意

在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。