基础动画使用

场景一：一张图片先移动至某个地方，等到触发某个开关后每两秒执行一帧上下动画

1.某一盒子样式
.popup {
transform: translateY(100px); // 页面初次加载只执行一次的动画，纵向移动100px
transition: transform .5s ease-in; //只执行一次的动画时长和速度
animation: tarminalMove 2s infinite; // 分别对应动画名，总时长，运动状态
}
2.添加动画
@keyframes tarminalMove {
from {
transform: translateY(100px);
}

to {
transform: translateY(50px);
}
}

场景二：头部文字循环滚动

1，标签代码样式

<View className="box">
            <View className="animate">
              如果充电中插拔插座可能会导致断电，请重新扫码进行连接
            </View>
          </View>

2.滚动文字的盒子样式

.box {
      width: 100%;
      height: 60px;
      line-height: 60px;
      // margin: 0 auto;
      overflow: hidden;
      background: rgba(255, 247, 204, 1);
    }
    
.animate {
      padding-left: 20px;
      font-size: 28px;
      color: rgba(254, 106, 5, 1);
      display: inline-block;
      white-space: nowrap;
      animation: 5s wordsLoop linear infinite normal;
    }

2.动画

@keyframes wordsLoop {
      0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }