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

动画

• 动画作用于渲染完成后，过渡是作用于元素发生改变的过程，动画这可以在正常显示的时候动起来

• 设置关键帧 @keyframes

@keyframes my-animation {
    0% {
        color: red;
    }
    50% {
        color: green;
    }
    100% {
        color: blue;
    }
}

也可以只设置首尾两个关键帧

@keyframes my-animation {
    from {
        color: green;
    }
    to {
        color: blue;
    }
}

• 使用关键帧让动画作用于元素

p {
    animation: my-animation 3s linear infinite alternate;
}

infinite:动画播放次数为循环播放

alternate：动画播放顺序为先正向后反向
如果不定义infinite，p元素会在创建完毕后执行一次动画，如果使用js动态给p元素添加动画class，会在添加完成后执行动画，参见：https://www.jianshu.com/p/0569e2925d58