css3保持结束状态 |css设置下拉箭头

为了保持CSS3动画的结束状态，大家可以使用以下两种方法：

1. 使用animation-fill-mode属性
animation-fill-mode属性定义了动画在其执行期间的状态。默认值是none，表示动画会在执行完后立即恢复到默认状态。如果大家将其设置为forwards，动画将会在结束时保持最后的状态。
例子：
div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

2. 使用transition属性
transition属性可以用于将一些属性在一段时间内平滑地过渡到新值。大家可以设置一个非常大的过渡时间来使其永久保持在结束状态。这种方法比使用animation-fill-mode更适用于像平滑过渡颜色和大小这样的简单动画。
例子：
div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 999999s; /*非常大的值*/
}
div:hover {
background-color: yellow;
}

总的来说，这些方法都可以帮助大家在CSS3动画结束时保持结束状态。具体使用哪种方法取决于动画的类型和属性。