字幕滚动动画

//滚动文案
<view class='scrollx'>
    <view class="scroll-animation">滚动文案</view>
</view>

//css
.scrollx{
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  white-space: nowrap;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}


.scroll-animation{
  position: absolute;
  top:0px;
  width: 100%;
  font-size: 26rpx;
  color: rgba(25,83,157,1);
  animation: scrollItps 18s linear  infinite ;
}

@keyframes scrollItps{
  0%   { left:100%;}//其实这里最好使用  transform: translate();translate针对的本身元素平移，left这种百分比是针对父元素的
  100% { left:-180%; }
}