css forwards |css 站长统计

.animation {
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

上述代码中，大家定义了一个名为move的动画，从左到右移动100像素距离。在.animation类的样式中，大家定义了该元素使用move动画，并使用forwards属性使得动画结束后保持在最终状态。

需要注意的是，使用forwards属性只会使元素保持动画结束时的状态，而不会解除动画造成的影响。比如说，如果上述动画定义了opacity属性，当动画结束时，元素仍然是透明的，即使使用其他样式修改opacity值也无法改变。因此，使用forwards属性时需要注意动画对应的属性以及影响。