第八章动画

华而有识

已于 2023-02-05 14:14:56 修改

阅读量163

点赞数

分类专栏： vue.js 3 前端开发实战文章标签：动画 css3 前端

于 2023-02-05 13:56:16 首次发布

本文链接：https://blog.csdn.net/FrontEndEngineer/article/details/128886152

版权

vue.js 3 前端开发实战专栏收录该内容

8 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何使用CSS3的transition和keyframes创建动画，包括过渡动画和基于关键帧的复杂动画。同时，讨论了JavaScript实现动画效果的方法。在Vue中，深入探讨了过渡动画的定义、监听回调以及在多个组件和列表过渡动画的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

8.1 使用CSS3创建动画

CSS3动画的核心是定义keyframes和transition。

keyframes定义了动画的行为，比如定义颜色渐变动画的起始颜色和终止颜色；transition定义过渡动画的属性。

transition过渡动画

<body>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: red;
            transition-property: width, height, background-color; 
            transition-delay: 2s;
            transition-duration: 1s;