本文主要是介绍css动画使用keyframes，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!--css动画keyframes-->
<template><div><transition name="fade"><div v-if="show">我是为了演示动画效果的哈</div></transition><button @click="handleClick">点我看动画</button></div>
</template><script>
export default {data(){return{show:false,}},methods:{handleClick(){this.show = !this.show;}}
}
</script><style>
@keyframes bounce-in {0%{transform: scale(0);}50%{transform: scale(1.5);}100%{transform: scale(1);}
}
.fade-enter-active{transform-origin: left center;animation: bounce-in 1s;
}.fade-leave-active{transform-origin: left center;animation: bounce-in 1s reverse;
}
</style>上面的代码等于下面的代码
<!--css动画keyframes-->
<template><div><transition name="fade" enter-active-class="active"leave-active-class="leave"><div v-if="show">我是为了演示动画效果的哈</div></transition><button @click="handleClick">点我看动画</button></div>
</template><script>
export default {data(){return{show:false,}},methods:{handleClick(){this.show = !this.show;}}
}
</script><style>
@keyframes bounce-in {0%{transform: scale(0);}50%{transform: scale(1.5);}100%{transform: scale(1);}
}
.active{transform-origin: left center;animation: bounce-in 1s;
}.leave{transform-origin: left center;animation: bounce-in 1s reverse;
}
</style>使用animate.css
可复制代码：
<!--css动画keyframes-->
<template><div><transition name="fade" enter-active-class="animated swing"leave-active-class="animated shake"><div v-if="show">我是为了演示动画效果的哈</div></transition><button @click="handleClick">点我看动画</button></div>
</template><script>
export default {data(){return{show:false,}},methods:{handleClick(){this.show = !this.show;}}
}
</script><style lang="scss" scoped>
@import url(./animate.css);
</style>
这篇关于css动画使用keyframes的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
