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;