css 过渡动画

CSS 过渡动画是一种非常强大的视觉效果，可以让页面元素具有更好的交互性。在过渡动画中，我们可以使用 CSS 属性来控制元素在某些状态下的动画效果，比如鼠标悬停或点击状态下的变化。

为了使用 CSS 过渡动画，我们需要给元素添加一个过渡效果。一般来说，我们会在 CSS 中使用 transition 属性来定义这个过渡效果。transition 属性需要指定一些属性，包括过渡的属性、过渡的时间和过渡的缓动曲线，我们可以使用如下的代码来实现：

    .Box{
        width: 100px;
        height: 100px;
        background-color: #f00;
        transition: width 1s ease-in-out;
    }

    .Box:hover{
        width: 200px;
    }

在上面的代码中，我们给一个名为 "Box" 的元素添加了一个过渡效果。我们在 .Box:hover 中添加了一个 width 的属性，这将会导致元素的宽度在鼠标悬停时从 100px 过渡到 200px。另外，我们还在 .Box 中添加了一个 transition 属性，这个属性告诉浏览器我们要给 width 属性添加一个过渡效果，过渡时间为 1 秒，缓动曲线为 ease-in-out。

CSS 过渡动画还有很多其他的用法，比如过渡颜色、透明度、旋转等等。我们可以在实际的开发中灵活运用它们，以实现更好的交互效果。