animationFillMode 设置动画起点样式
时间: 2023-07-04 22:16:11 浏览: 53
`animation-fill-mode`属性用于设置动画在执行前和执行后的起点和终点样式。在动画执行前,元素的样式会被设置为动画序列中第一帧的样式,而在动画执行完毕后,元素的样式会被设置为动画序列中最后一帧的样式。
`animation-fill-mode`属性可以设置以下值:
- `none`:默认值,元素在动画执行前和执行后的样式不会被改变。
- `forwards`:元素在动画执行结束后,会保留动画序列中最后一帧的样式。
- `backwards`:元素在动画执行前,会设置为动画序列中的第一帧的样式。
- `both`:元素在动画执行前和执行后都会应用动画序列中的样式。
以下是一个示例代码,用于设置一个动画执行前和执行后的起点和终点样式:
```css
/* 定义动画序列 */
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
/* 设置元素的起始样式 */
.element {
position: absolute;
left: 0;
top: 0;
opacity: 0;
animation: slideInFromLeft 1s ease-in-out;
animation-fill-mode: backwards;
}
```
在上面的示例中,通过`animation-fill-mode: backwards`将元素在动画执行前设置为动画序列中的第一帧样式,即`transform: translateX(-100%);`。