微信小程序公告文字滚动

wxml

    <view class="index_Notice">
        <view class="index_Notice_title">公告</view>
        <view class="index_Notice_text" >
           <text id="mjltesta">招募全国各地地区推广招募全国各地地区推广招募全国各地地区推广招募全国各地地区推广招募全国各地地区推广！</text>
        </view>
    </view>

css

.index_Notice{
  width:100%;
  box-sizing: border-box;
  padding:10px;
  display: flex;
}
.index_Notice_title{
  display:inline-block;
  border-radius:3px;
  color:#fff;
  background:red;
  padding:0px 5px;
  font-size:14px;
  height:20px;
  width:80px;
}

.index_Notice_text{
    color:#000000;
    font-size:14px;
    margin-left:5px;
    height:20px;
    overflow: hidden;
    white-space: nowrap;
}
.index_Notice_text text{
    white-space: nowrap;
    animation: 20s loop linear infinite normal;
    display: inline-block;
    vertical-align: top;
}

@keyframes loop {
  0% {
    transform: translateX(350px);
    -webkit-transform: translateX(350px);
  }

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

@-webkit-keyframes loop {
  0% {
    transform: translateX(300px);
    -webkit-transform: translateX(300px);
  }

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