vue动画+原生动画

原生：
    html:
        <div id="myPulse" style="width: 20px;height:20px;transform-origin: 75px 75px;animation-duration: 1s;animation-iteration-count: infinite;animation-name="pulse";></div>
    css:
     @keyframes pulse {
         from {
            width: 20px
         }
         to   {
            width: 25px;
         }
     }


vue:
   mounted () {
     let myPulse = document.querySelect('#myPulse')
     let myPulseAnimation = `@keyframes pulse {
        from {
           width: 20px
        }
        to {
           width: 25px
        }
    }`
    document.styleSheets[0].insertRule(myPulseAnimation)
    myPulse.style.transformOrigin = '75px 75px'            // 起始
    myPulse.style.animationDuration = '1s'                 // 时间
    myPulse.style.animationTimingFunction = 'linear'       // 线性
    myPulse.style.animationIterationCount = 'infinite'     // 循环
    myPulse.style.animationName = 'pulse'                  // 名称
}
   

在动画（animation）中，有以下属性可供使用：

animation-name：指定动画名称。
animation-duration：指定动画周期时长。
animation-delay：指定动画开始的延迟时间。
animation-direction：指定动画播放方向，如正常播放（normal）、反向播放（reverse）、交替播放（alternate）等。
animation-timing-function：指定动画流动的速度曲线。可选值有 ease、linear、ease-in、ease-out、ease-in-out，也可以自定义贝塞尔曲线。
animation-fill-mode：指定动画完成前后元素的状态。可选值有 none、forwards、backwards、both。
animation-play-state：控制动画的播放状态，可选值有 paused 和 running。
其他还有一些与 animation 相关的属性，例如：

@keyframes：声明一个动画中各帧的样式。
animation-iteration-count：指定动画重复的次数，可选值有数字、infinite（无限次）。
animation-play-state: 规定动画是运行或暂停，默认为运行。