I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a sample):
我已经到了这一点,我正在尝试对一个我无法移动或修改其边界的元素进行hilite动画,所以我使用了除了背景颜色之外的轮廓以使动画区域大于元素本身(这是一个例子):
@keyframes hilite {
0% {
background-color: transparent;
outline: #ffffff solid 10px;
}
20% {
background-color: #F6F6BC;
outline: #F6F6BC solid 10px;
}
100% {
background-color: transparent;
outline: #ffffff solid 10px;
}
}
But now i'm freaking seeing that the background animation triggers in every case, but the outline animation works only when the element has an outline style value (none doesn't work, when background none doesn't avoid animations).
但是现在我很惊讶看到背景动画在每种情况下都会触发,但是轮廓动画只有在元素具有轮廓样式值时才会起作用(没有一个不起作用,当背景无法避免动画时)。
You can see it here.
你可以在这里看到它。
I don't want to fix it, it's already fixed, but understand it - seems illogical to me.
我不想修复它,它已经修复了,但是理解它 - 对我来说似乎不合逻辑。
Lots of thanks in advance.
非常感谢提前。
1 个解决方案
#1
9
Border and outline styles cannot be animated; this is by design. When you attempt to animate a change from none to solid, as shown in the last box in your fiddle, what happens is that it switches to solid immediately, which causes it to display as a black outline momentarily before animating to the color that's defined, so it doesn't actually animate from no outline to a solid outline in that sense.
边框和轮廓样式无法动画;这是设计的。当您尝试将无变化的动画设置为实体时,如小提琴中的最后一个框所示,会发生的情况是它立即切换为实体,这会导致它在动画到定义的颜色之前暂时显示为黑色轮廓,所以它实际上并没有从那个意义上的无轮廓到实线轮廓的动画。
If you need a smooth animation from an invisible outline to a visible outline, animate outline-color between a color value and transparent instead of outline-style between solid and none. I see that you're using #ffffff in place of transparent, which also works provided the background of the container is also white.
如果您需要从不可见轮廓到可见轮廓的平滑动画,请在颜色值和透明之间设置轮廓颜色,而不是实心和无轮廓之间的轮廓样式。我看到你使用#ffffff代替透明,如果容器的背景也是白色的话也可以。
#1
9
Border and outline styles cannot be animated; this is by design. When you attempt to animate a change from none to solid, as shown in the last box in your fiddle, what happens is that it switches to solid immediately, which causes it to display as a black outline momentarily before animating to the color that's defined, so it doesn't actually animate from no outline to a solid outline in that sense.
边框和轮廓样式无法动画;这是设计的。当您尝试将无变化的动画设置为实体时,如小提琴中的最后一个框所示,会发生的情况是它立即切换为实体,这会导致它在动画到定义的颜色之前暂时显示为黑色轮廓,所以它实际上并没有从那个意义上的无轮廓到实线轮廓的动画。
If you need a smooth animation from an invisible outline to a visible outline, animate outline-color between a color value and transparent instead of outline-style between solid and none. I see that you're using #ffffff in place of transparent, which also works provided the background of the container is also white.
如果您需要从不可见轮廓到可见轮廓的平滑动画,请在颜色值和透明之间设置轮廓颜色,而不是实心和无轮廓之间的轮廓样式。我看到你使用#ffffff代替透明,如果容器的背景也是白色的话也可以。