css 图片填充模式_CSS动画填充模式

css 图片填充模式

We're always super excited to get into CSS animations because, quite frankly, they're incredibly awesome.  One overlooked animation property, however, is the animation-fill-mode property.  This CSS property sets the state of the end animation when the animation is not running.  Here's a quick example:

我们总是为加入CSS动画而感到非常兴奋，因为坦率地说，它们非常棒。 但是，一个被忽略的动画属性是animation-fill-mode属性。 当动画不运行时，此CSS属性设置结束动画的状态。 这是一个简单的例子：

@keyframes fadeIn{
	0% { opacity: 0 }
	100% { opacity: 1 }
}

.fadeIn {
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

In the case of my fadeIn animation, I want the element to stay at an opacity of 1 when the animation is complete.  If I don't set the value to forwards, the element would go back to an opacity of 0 after the animation runs.  In most cases, you'll likely want the the value of animation-fill-mode to be forwards, so don't forget to add it!

对于我的fadeIn动画，我希望动画完成后该元素保持不透明度为1。 如果我未将值设置为forwards，则在动画运行后，该元素将恢复为0的不透明度。 在大多数情况下，您可能希望将animation-fill-mode的值转发，所以请不要忘记添加它！

翻译自: https://davidwalsh.name/animation-fill-mode

css 图片填充模式