前端 过渡动画 帧动画

/*
定义帧动画
@keyframes 动画名称{
from | to | 百分数{
样式属性1：值1；
样式属性2：值2；
…
}
}
帧动画 animation
animation-name 设置动画的名称
animation-duration 设置动画的持续时间
animation-timing-function 设置动画的时间函数（速度）速度模型其值 ease（由慢到快再到慢） linear（线性匀速的） ease-in（由慢到快） ease-out（由快到慢）
animation-delay 设置动画的延迟时间
animation-iteration-count 设置动画次数
animation-direction 设置动画的方向

*/

.box{
    width: 200px;
    height: 200px;
    animation-name: gs;
    background-color: red;
    animation-duration: 50s;
    animation-timing-function: linear;
    /* animation-iteration-count:3; */
    animation-iteration-count:infinite;  
    animation-direction: alternate; /* 正着来一遍反着来一遍 */
    position: relative;
    }
    
    
    @keyframes gs{
    0%{
        background: red;
        left: 0;
    }
    5%{
        background:green;
       
        left:300px;
    }
    30%{
        background: blue;
      top: 300px;
    }
    50%{
        background: pink;
       left: 500px;
    }
    70%{
        background:yellow;
       left:200px;
        top:0;
    } 定义帧动画
    @keyframes 动画名称{
        from |  to | 百分数{
            样式属性1：值1；
            样式属性2：值2；
            ......
        }
    }

/*
帧动画  animation
animation-name 设置动画的名称
animation-duration 设置动画的持续时间
animation-timing-function 设置动画的时间函数（速度）速度模型其值 ease（由慢到快再到慢） linear（线性匀速的） ease-in（由慢到快） ease-out（由快到慢）
animation-delay 设置动画的延迟时间
animation-iteration-count 设置动画次数
animation-direction 设置动画的方向


*/

.box{
width: 200px;
height: 200px;
animation-name: gs;
background-color: red;
animation-duration: 50s;
animation-timing-function: linear;
/* animation-iteration-count:3; */
animation-iteration-count:infinite;  
animation-direction: alternate; /* 正着来一遍反着来一遍 */
position: relative;
}


@keyframes gs{
0%{
    background: red;
    left: 0;
}
5%{
    background:green;
   
    left:300px;
}
30%{
    background: blue;
  top: 300px;
}
50%{
    background: pink;
   left: 500px;
}
70%{
    background:yellow;
   left:200px;
    top:0;
}


练习

```html
*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: black;
}
.test span{
    font-size: 20vh;
    text-transform: uppercase;
    color: #9980FA;
    margin: 0 20px;
    font-weight: 600;
    position: relative;
}
.test span:nth-child(n+2){
    animation-delay: 0.2s;
    animation: a 2s ease infinite alternate;
}
.test span:nth-child(n+3){
    animation-delay: 0.4s;
    animation: b 1s ease infinite alternate;
}
.test span:nth-child(n+4){
    animation-delay: 0.6s;
    animation: a 2s ease infinite alternate;
}
.test span:nth-child(n+5){
    animation-delay: 0.8s;
    animation: b 1s ease infinite alternate;
}
.test span:nth-child(n+6){
    animation-delay: 1s;
    animation: a 2s ease infinite alternate;
}
.test span:nth-child(n+7){
    animation-delay: 1.2s;
    animation: b 1s ease infinite alternate;
}
.test span:nth-child(n+8){
    animation-delay: 1.4s;
    animation: a 2s ease infinite alternate;
}

@keyframes a{
    to{
        color:#12CBC4;
        text-shadow: 20px 0 70px #A3CB38;
        top:30px;
    }
}
@keyframes b{
    to{
        color:#12CBC4;
        text-shadow: 20px 0 70px #A3CB38;
        bottom:30px;
    }
}