动画（移动效果）

过渡与动画的区别

//过渡需要配合鼠标悬停时使用，没有办法进入页面后就自动执行

//动画可以设置进入页面后自动执行动画，而且功能样式多，更加美观
//动画执行有两个步骤：
        1、先定义一个动画出来  
        2、然后在样式中调用动画即可

定义动画

//在样式里面设置
@keyframes 动画名称 {
         from {}
         to {}
}
或
@keyframes 动画名称 {
           0% {}
           50% {}
           100% {}
}
//from和to的搭配使用，只能呈现开始和结束两个情节
//百分比的使用能够实现每个阶段该怎样执行，能够有阶梯性的变化
//form和0%如果初始值不变化，可以省略书写

调用动画

//在样式中调用
//animation：动画名称 动画执行时间 次数 速度曲线 动画延迟执行时间 反向播放（怎么来就怎么倒回去） 停留结束位置;
例如：
        .box {
            animation:  ;
        }

//速度曲线：
    默认值：ease    可进入链接查看：https://cubic-bezier.com/#.17,.67,.83,.67
      匀速：linear
  逐帧动画：steps()    括号里面是数字，多少下执行完整个动画

//次数：
    填写值：几次；
    无限次：infinite

//反向播放：alternate

//结束后停留在结束的位置：forwards

//暂停动画（一般搭配hover使用，鼠标悬停后动画停止）
    animation-play-state：paused;
 
//动画延迟（单独使用，可以实现动画运动时间不等，使画面更加协调）
    animation-delay：时间;