vue 使用 CSS3 @keyframes 注意要點～

------------恢復內容開始------------

項目中用到了在一個框里面文案在里面橫向滾動

想了好多方法之后突然看到

transform: translate(110%, 0px);

這個屬性讓元素偏移 突然有了思路

可以使用css3自帶的 @keyframes     因為我們在vue框架中使用的這些屬性 所以我們就不用考慮瀏覽器適配問題了

  @keyframes move
  {
    0% {
      transform: translate(110%, 0px);
    }

    100% {
      transform: translate(-200%, 0px);
    }
  }

然后在元素的屬性中增加一個屬性即可 代碼如下

  .notice-tips {
    animation: move 15s infinite;
    animation-iteration-count:10;
  }

 

具體animation的屬性可以查看

https://www.w3school.com.cn/cssref/pr_animation.asp