语法
 
@keyframes animationname {keyframes-selector {css-styles;}}
 
animationname 必需。定义动画的名称。
 
keyframes-selector
 
必需。动画时长的百分比。
 
合法的值：
 
0-100%
 
from(与 0% 相同)
 
to(与 100% 相同)
 
css-styles 必需。一个或多个合法的 CSS 样式属性。
 
定义和用法
 
通过 @keyframes 规则，您能够创建动画。
 
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
 
在动画过程中，您能够多次改变这套 CSS 样式。
 
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
 
0% 是动画的开始时间，100% 动画的结束时间。
 
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
 
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
 
目前浏览器都不支持 @keyframes 规则。
 
Firefox 支持替代的 @-moz-keyframes 规则。
 
Opera 支持替代的 @-o-keyframes 规则。
 
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
 
例：
 
复制代码代码如下:
 
div
 
{
 
width:100px;
 
height:100px;
 
background:red;
 
position:relative;
 
animation:mymove 5s infinite;
 
-moz-animation:mymove 5s infinite; /* Firefox */
 
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
 
-o-animation:mymove 5s infinite; /* Opera */
 
}
 
@keyframes mymove
 
{
 
0% {top:0px; left:0px; background:red;}
 
25% {top:0px; left:100px; background:blue;}
 
50% {top:100px; left:100px; background:yellow;}
 
75% {top:100px; left:0px; background:green;}
 
100% {top:0px; left:0px; background:red;}
 
}
 
@-moz-keyframes mymove /* Firefox */
 
{
 
0% {top:0px; left:0px; background:red;}
 
25% {top:0px; left:100px; background:blue;}
 
50% {top:100px; left:100px; background:yellow;}
 
75% {top:100px; left:0px; background:green;}
 
100% {top:0px; left:0px; background:red;}
 
}
 
@-webkit-keyframes mymove /* Safari and Chrome */
 
{
 
0% {top:0px; left:0px; background:red;}
 
25% {top:0px; left:100px; background:blue;}
 
50% {top:100px; left:100px; background:yellow;}
 
75% {top:100px; left:0px; background:green;}
 
100% {top:0px; left:0px; background:red;}
 
}
 
@-o-keyframes mymove /* Opera */
 
{
 
0% {top:0px; left:0px; background:red;}
 
25% {top:0px; left:100px; background:blue;}
 
50% {top:100px; left:100px; background:yellow;}
 
75% {top:100px; left:0px; background:green;}
 
100% {top:0px; left:0px; background:red;}
 
}
 
注释：本例在 Internet Explorer 中无效。

最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图（主要涉及到动画效果,中间部分左右两边不说）：
 
 
主要思路
 
使用animation配合@keyframes来使用上下移动动画
 
问题1：如何将不同柱子的top值传递给@keyframes中?用 document.styleSheets[0].insertRule
 
在请求后端成功后进行的操作:
 
document.styleSheets[0].insertRule(
    "@keyframes tbMove" + index + "" +
    "{" +
    "0%{top: " + topValue + "px;}" +
    "50%{top: " + (topValue + 15) + "px;}" +
    "100%{top: " + topValue + "px;}" +
    "}"
)
document.styleSheets[0].insertRule(".tbmovestyle" + index + "{" +
    "animation: tbMove"+index+" 4s infinite;" +
    "}"
)
 
以上代码相当于在页面中插入了 .tbmovestyle 和 @keyframes tbMove + index 样式.可以通过以下代码查看页面样式
 
console.log("document", document.styleSheets[0])
 
随后在使用的地方动态绑定即可,参考例子:
 
<div v-for="(item,index) in centerMsg" :style="{'left':item.LEFT,'top':item.TOP}"
           :class="{
           'tbmovestyle0':index==0,
           'tbmovestyle1':index==1,
           'tbmovestyle2':index==2,
           'tbmovestyle3':index==3,
           'tbmovestyle4':index==4,
           'tbmovestyle5':index==5,
           'tbmovestyle6':index==6,
           'tbmovestyle7':index==7,
           'tbmovestyle8':index==8,
           'tbmovestyle9':index==9,
           'tbmovestyle10':index==10,
           'tbmovestyle11':index==11,
           }"></div>
 
以上就是我对Vue中@keyframes动态参数的认识,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。

使用一个简单的投票系统来做演示。
 
 
 
操作
 
主要使用的是document.styleSheets[0]
 通过插入规则 insertRule 来添加动画
 最后通过style进行样式修改
 
代码
 
下面是演示代码：
 
<template>
    <div>
        <div class="toupiao" v-if="showTest">
            <div class="yes btns" @click="changes('1')">赞同</div>
            <div class="no btns" @click="changes('0')">不赞同</div>
        </div>
        <div class="showToupiaoMsg" v-show="!showTest">
            <div class="yes btns" ref="yes">
                <div>
                    <span v-show="touVal == '1'">您选择了：</span>
                    赞同
                </div>
                <div>
                    {{ yesPeople }}
                </div>
            </div>
            <div class="no btns" ref="no">
                <div><span v-show="touVal == '0'">您选择了：</span>不赞同</div>
                <div>
                    {{ noPeople }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            yesPeople: 6781, //同意人数
            noPeople: 3361, //不同意人数
            showTest: true, //显示
            touVal: "" //选择的选项
        }
    },
    methods: {
        // 显示投票数据
        changes(val) {
            this.showTest = false
            this.touVal = val
        }
    },
    mounted() {
        // 百分比
        var isTrue = (this.yesPeople / (this.yesPeople + this.noPeople)) * 100
        var isFalse = (this.noPeople / (this.yesPeople + this.noPeople)) * 100
        // 规则
        var ruleTrue = ` @keyframes changeWidth3 {
                    to {
                        background-size: ${isTrue}% 100%;
                    }
            }`
        var rulesFalse = `
                     @keyframes changeWidth4 {
                    to {
                        background-size: ${isFalse}% 100%;
                    }
            }`
        // 获取规则并进行改变
        var sheet = document.styleSheets[0]
        sheet.insertRule(ruleTrue, 0)
        sheet.insertRule(rulesFalse, 0)
        this.$refs.yes.style.animation = "changeWidth3  1s  forwards"
        this.$refs.no.style.animation = "changeWidth4  1s  forwards"
    }
}
</script>

<style lang="less" scoped>
.toupiao {
    width: 100vw;
    height: 100px;
    overflow: hidden;
    background: pink;
    .btns {
        width: 94%;
        height: 2rem;
        margin: 10px;
        border: 1px solid #fff;
        border-radius: 5px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btns:active {
        background: orangered;
        border: 1px solid orangered;
        opacity: 0.6;
    }
}
.showToupiaoMsg {
    width: 100vw;
    height: 120px;
    overflow: hidden;
    background: pink;
    margin-top: 1px;
    .btns {
        width: 92%;
        height: 2rem;
        margin: 10px;
        border: 1px solid #fff;
        border-radius: 5px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0.2rem;
        align-items: center;
    }
    .yes {
        background-image: linear-gradient(#73ffa0, #73ffa0);
        background-repeat: no-repeat;
        background-size: 0 100%;
        background-position: 0 70%;
        animation: changeWidth 1s forwards;
    }
    .no {
        background-image: linear-gradient(#ccc, #ccc);
        background-repeat: no-repeat;
        background-size: 0 100%;
        background-position: 0 70%;
        animation: changeWidth2 1s forwards;
    }
}
</style>

keyframes选择器可做“过渡”类效果
 
用做测试可自己创一个；这是一个box（红色圆球）在一个边框里利用keyframes在页面刷新时进行从左到右的运动布局代码为
 
 
 
 
 
 
 
 
然后红球相对于蓝框相对运动；
 
 
然后设置keyframes，move（名称可自己设置）；
 
开始由0%到100%，改变left的值；设置完keyframes后通过animation动画来引用，即
 
 
 
 
move为前面keyframes设置的名称，2s为两秒钟完成由0%到100%；1为进行1次便结束；上面数据可根据自己需求设置；
 
完整代码为