Css过渡动画怎么写

CSS过渡动画可以通过使用transition属性来实现。以下是一些编写CSS过渡动画的步骤：

选择要应用动画的元素，并为其添加一个CSS类或ID。
在CSS中，为该类或ID选择器添加transition属性。该属性用于定义过渡效果的属性、持续时间和过渡函数。例如：transition: property duration timing-function delay; property：指定要过渡的CSS属性，如all（所有属性）、width（宽度）、opacity（透明度）等。 duration：指定过渡效果的持续时间，可以使用s（秒）或ms（毫秒）作为单位。 timing-function：指定过渡效果的时间函数，如linear（线性）、ease-in（渐进）等。你也可以使用自定义的贝塞尔曲线。 delay：指定过渡效果的延迟时间，可以使用s（秒）或ms（毫秒）作为单位。
定义过渡效果的起始和结束样式。你可以使用伪类选择器如:hover来定义鼠标悬停时的样式，或者使用JavaScript来控制样式的改变。例如：.element { property: value; }
当触发条件满足时，元素将会自动应用过渡效果。你可以使用CSS伪类选择器如:hover、:focus，或者使用JavaScript来触发过渡效果。例如：.element:hover { property: value; }

下面是一个简单的例子，演示了一个鼠标悬停时改变元素背景颜色的过渡动画：

HTML：

<div class="element">Hover me</div>

CSS：

.element {
  background-color: red;
  transition: background-color 1s ease-in-out;
}

.element:hover {
  background-color: blue;
}

这个例子中，当鼠标悬停在元素上时，背景颜色将从红色过渡到蓝色，过渡效果持续1秒，时间函数为渐进