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;
    }
}

@keyframes move {
    100% {
        transform: translateX(200px);//水平偏移200px
    }
}

animation: move 2s linear infinite alternate forwards;

//设置 动画名称 延迟时间

动画函数 （1）linear匀速运动（2）ease开始缓慢 中间快速 最后缓慢（3）ease-in 开始慢

               （4）ease-out 结尾慢 （5）ease-in-out 开始和结束慢
播放次数 （infinite无限播放）
播放顺序（reverse反向播放，alternate轮流播放）
停止状态（forwards播放指定的次数后停止  running无限播放）

 

 

 

 

 

来源：CSDN

作者：吴小花的博客

链接：https://blog.csdn.net/weixin_39089928/article/details/103714389