uniapp 使用动态style传参失败

在uniapp里面显示一个有服务器返回来的公告，我需要对这个公告实现一个跑马灯式效果，但是动态填充的动画特效参数无效，现在就想问问，怎么样才能正确传入参数给css里面的keyframes，我在最下面用了三种办法，一种常规动态填充，但是无效不报错；一种写死数值，但是有效；另一种就是类似vue里面的写法，虽然在HBuilderX报错，但是在微信开发者工具里面是有效的；

现在想问问，我到底要怎么写才能避免HbuilderX报错，又能让跑马灯效果实现出来？

下述出现的 marqueeWidth这个变量是由JavaScript里面计算出来的， 主要代码如下：

这是scss：

.announcement-content {  
    width:100%;  
    overflow: hidden;  

    .announcement-text {  
        display: inline-block;  
        white-space: nowrap;  
        animation-name: around;  
        animation-duration: 10s;  
        /*过渡时间*/  
        animation-iteration-count: infinite;  
        animation-timing-function: linear;  
    }  
}  
@keyframes around {  
    from {  
        margin-left: 100%;  
    }  

    to {  
        /* var接受传入的变量 */  
        margin-left: var(--marqueeWidth);  
        }  
}

这是template：

<view class="announcement-content">  
    <text class="announcement-text" :style="{'--marqueeWidth':marqueeWidth+'em'}">{{announcement}}</text>   
</view>  
<!-- 上面这个效果不报错且无效 -->  

<view class="announcement-content">  
    <text class="announcement-text" style="--marqueeWidth':-75em">{{announcement}}</text>   
</view>  
<!-- 上面这个效果不报错且有效 -->  

<view class="announcement-content">  
    <text class="announcement-text" style="--marqueeWidth':{{marqueeWidth}}em">{{announcement}}</text>   
</view>  
<!-- 这个效果需要在hbuilderx里面报错，但是在小程序开发工具里面刷新页面依旧能正常实现跑马灯效果 -->

第三种办法报这个错误：

style="--marqueeWidth:{{marqueeWidth}}em": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.