transition和animation

transiton

.pic {
    &:hover {
        transform: rotate(45deg); //旋转45度
    }
    transition: transform 1s ease-out; 
}

animation

animation基础和写法

①动画名称（name）--@keyframes，与transition不同的是，animation需要自定义一个名称②过渡时间（duration）延迟时间（delay）③时间函数（timing-function）④播放次数（iteration-count）⑤播放方向（direction），即是否轮流播放和反向播放⑥停止播放的状态（fill-mode），⑦是否暂停（play-state）

⑤的属性值：alternate：先正向后反向；reverse：反向播放

.pic {
    &:hover {
        animation: move 2s linear infinite alternate forwards;