[分享]css中定义动画的两种方式

CSS (Cascading Style Sheets) 是用来定义 HTML 和 XML 文档样式的标准语言。它可以帮助开发人员更加灵活地控制文档的显示效果。在 CSS 中，我们可以通过定义动画来增...

CSS (Cascading Style Sheets) 是用来定义 HTML 和 XML 文档样式的标准语言。它可以帮助开发人员更加灵活地控制文档的显示效果。在 CSS 中，我们可以通过定义动画来增强用户体验和吸引用户的注意力。下面介绍两种定义动画的方式。

  /* 方式一：使用@keyframes规则 */
        @keyframes anim {
            0% {
                transform: translateX(0);
                opacity: 1;
            }
            50% {
                transform: translateY(100px);
                opacity: 0.5;
            }
            100% {
                transform: translateX(200px);
                opacity: 0;
            }
        }

        /* 方式二：使用transition属性 */
        .box {
            transition: all 1s ease-in-out;
        }

        .box:hover {
            transform: translateX(100px);
            opacity: 0.5;
        } 

方式一是通过使用 @keyframes 规则定义动画关键帧来实现的。在定义动画的过程中，我们需要指定每一帧的样式，通过 percentage 或 from/to 来设置关键帧的位置。在使用时，通过 animation 属性引用即可。

方式二是通过使用 transition 属性实现的。这种方式比较简单，我们只需要在原元素上定义过渡效果，当元素状态变化时，过渡效果就会自动触发。然后在伪类等选择器中变更元素样式即可。

以上两种方式在不同的场景下都可以用到，具体实现方式根据需求来选择即可。