animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。
none | 不改变默认行为。 |
forwards | 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 |
backwards | 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 |
both | 向前和向后填充模式都被应用。 |
关于这三个,很好理解;具体请看demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> *{margin: 0; padding: 0;} .box{width: 100px; height: 100px; background: red; border-radius: 50%; opacity: 0.5; animation: paly 2s linear backwards } @keyframes paly{ 0%{-webkit-transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); -o-transform: scale(0.5,0.5); transform: scale(0.5,0.5);} 100%{ -webkit-transform:scale(0,0); -ms-transform:scale(0,0); -o-transform:scale(0,0); transform:scale(0,0); } } </style> </head> <body> <div class="box"></div> </body> </html>
这是一个大小匀速变化的圆,当animation的填充模式为backwards的时候,可以看到,小圆缩小后直至没有了,说明保持了最后一帧;当animation的填充模式为forwards的时候,则相反;当animation的填充模式为both的时候,第一帧和最后一帧都保留;
时间: 2024-08-08 13:55:16