.css()时间延迟,CSS3动画延迟超过持续时间中断动画(CSS3 Animation Delay longer than Duration breaks animation)...

CSS3动画延迟超过持续时间中断动画(CSS3 Animation Delay longer than Duration breaks animation)

我试图从display:none;opacity:0;设置元素的动画display:none;opacity:0; display:block;opacity:1; 。 虽然下面的动画工作，当我在动画中引入延迟时，我发现我无法将延迟值设置为高于动画持续时间值。 当我这样做时，动画将被忽略。

如何将延迟设置为2秒，我的动画持续时间为300毫秒而不会断开？

div p + p {

display: none;

opacity: 0;

}

div p:hover + p {

display: block;

opacity: 1;

/* browser prefixes removed for brevity */

-webkit-animation: fadeInFromNone 300ms 900ms linear;

animation: fadeInFromNone 300ms 900ms linear;

}

div.working p:hover + p {

display: block;

opacity: 1;

/* browser prefixes removed for brevity */

-webkit-animation: fadeInFromNone 300ms 300ms linear;

animation: fadeInFromNone 300ms 300ms linear;

}

@-webkit-keyframes fadeInFromNone {

0% {

display: none;

opacity: 0;

}

1% {

display: block ;

opacity: 0;

}

100% {

display: block ;

opacity: 1;

}

}

keyframes fadeInFromNone {

0% {

display: none;

opacity: 0;

}

1% {

display: block ;

opacity: 0;

}

100% {

display: block ;

opacity: 1;

}

}

Hover on me (broken)

Peek-a-boo

Hover on me (working)

Peek-a-boo

I am attempting to animate an element from display:none;opacity:0; to display:block;opacity:1;. While the below animation works, when I introduce a delay into the animation I find I cannot set the delay value higher than the animation duration value. When I do, the animation is ignored.

How do I set my delay to take e.g. 2 seconds and my animation duration to be 300ms without it breaking?

div p + p {

display: none;

opacity: 0;

}

div p:hover + p {

display: block;

opacity: 1;

/* browser prefixes removed for brevity */

-webkit-animation: fadeInFromNone 300ms 900ms linear;

animation: fadeInFromNone 300ms 900ms linear;

}

div.working p:hover + p {

display: block;

opacity: 1;

/* browser prefixes removed for brevity */

-webkit-animation: fadeInFromNone 300ms 300ms linear;

animation: fadeInFromNone 300ms 300ms linear;

}

@-webkit-keyframes fadeInFromNone {

0% {

display: none;

opacity: 0;

}

1% {

display: block ;

opacity: 0;

}

100% {

display: block ;

opacity: 1;

}

}

keyframes fadeInFromNone {

0% {

display: none;

opacity: 0;

}

1% {

display: block ;

opacity: 0;

}

100% {

display: block ;

opacity: 1;

}

}

Hover on me (broken)

Peek-a-boo

Hover on me (working)

Peek-a-boo

原文：https://stackoverflow.com/questions/27023608

更新时间：2019-12-06 18:14

最满意答案

这归结为时间问题。

最初p有display:none; 和opacity:0; 。 在悬停时，p有display:block; 和opacity:1; ，然后，在延迟之后，这将重置为display:none; 和opacity:0; 动画开始时。

通过设置悬停p来display:block; 并且只为不透明度设置动画，然后我几乎得到了所需的结果。 要停止动画完成并将p设置为opacity:0再次将forwards属性添加到动画中：

div p + p {

display: none;

opacity: 0;

}

div p:hover + p {

display: block;

/* browser prefixes removed for brevity */

-webkit-animation: fadeInFromNone 300ms linear 900ms forwards;

animation: fadeInFromNone 300ms linear 900ms forwards;

}

@-webkit-keyframes fadeInFromNone {

from { opacity:0; }

to { opacity:1; }

}

keyframes fadeInFromNone {

from { opacity:0; }

to { opacity:1; }

}

Hover on me

Peek-a-boo

Why am I using an animation for opacity when I could use a transition? My main reason for doing an animation was to get display:block/none to work, but in my other answer it still doesn't work as I want it to. In this answer I am using visibility:hidden/visible and opacity:0/1 for the animation. The transition is so on hover that the transition takes 1 second to start (note transition-delay on the hover code), while on mouse-out the opacity will fade out first over nearly a second and the visibility will just stop being visible BUT it has a delay of the same amount as the opacity duration.

This gives me the lovely delayed fade-in / immediate fade-out that I wanted.

div p + p {

visibility:hidden;

opacity: 0;

/* browser prefixes removed for brevity */

transition:visibility 0s linear 900ms, opacity 900ms linear;

}

div p:hover + p {

visibility:visible;

opacity:1;

/* browser prefixes removed for brevity */

transition-delay:1s;

}

Hover on me

Peek-a-boo

相关问答

你可以在javascript中分配css类，并将你的转换/持续时间/动画放入这些css类中。或者你可以直接在javascript中指定你的css。 document.getElementById('your_id').style.animationDuration="1s";

对于跨浏览器，我们可以使用o，moz，ms和webkit作为前缀。 例-： document.getElementById('your_id').style.webkitTransitionDuration="1s";

...

这归结为时间问题。 最初p有display:none; 和opacity:0; 。 在悬停时，p有display:block; 和opacity:1; ，然后，在延迟之后，这将重置为display:none; 和opacity:0; 动画开始时。 通过设置悬停p来display:block; 并且只为不透明度设置动画，然后我几乎得到了所需的结果。 要停止动画完成并将p设置为opacity:0再次将forwards属性添加到动画中： div p + p {

display: none;

...

你的代码看起来不错。 您可以运行以下代码以查看它是否正常工作： fade-in {

opacity:0;

-webkit-animation:fadeIn ease-in 1;

-moz-animation:fadeIn ease-in 1;

animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:for

...

动画确实有持续时间。 问题是动画已经完成播放，除非动画名称属性发生变化，否则更改类将不会从头开始播放动画。 因此，解决此问题的一种方法是为bit-empty类和large-bit类创建单独的动画： .timeline-gauge {

height: 20px;

}

.timeline-gauge-container {

display: inline-block;

height: 100%;

}

.timeline-gauge-part {

display: blo

...

顺序不正确，您需要在animation-delay后面放置animation-delay ，这是速记属性，因此它会重置延迟计时器。 animation速记的顺序如下... 在每个动画定义中，顺序非常重要：可以将解析为的第一个值分配给animation-delay animation-duration ，将第二个值分配给animation-delay 。 积分： Mozilla开发者网络 因此，您正在定义animation-delay属性后， animation将延迟重置为0 演示 (不

...

你可以尝试以下。 有一个's'需要追加，你需要通过使用eq()方法来定位每个.basic-details元素。 $(document).ready(function() {

$('.basic-details').each(function(index) {

$(this).css('left', index * parseInt($(this).css('width')));

});

$('#button').click(function() {

var n

...

这种方法非常简单，但你需要像Paulie_D的评论中提到的那样进行数学运算。 我会选择是否使用它。 就个人而言，我认为这种方法没有任何问题，或者任何复杂性都没有。 要淡入/淡出的元素是静态的。 整体方法如下： 我们有3个元素/段落，为了示例目的，我将使它们在前3秒内淡入，在接下来的10秒内保持原样并在最后消失。 因此，对于每个元素，我们在动画时间中总共需要16秒。 当第一个元素完成动画并且第二个或第三个元素被动画化时，前面的元素应该保持最终状态(即淡出)。 为此，需要完成以下工作： 设置所有元素的

...

不需要您的最后一个关键帧：使用以下内容进行操作： @-webkit-keyframes sport{

0%{

-webkit-transform: rotateY(186deg);

-webkit-transform: translate(10px) ;

}

50%{

-webkit-transform: translate(500px) ;

}

51%{

-webkit-transfor

...

我设法找到了解决方案。 这可能有助于其他人，所以我回答了我自己的问题。 我在做什么是这样的： self.topLayoutConstraint?.constant = self.currentYPosition

UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.curveEaseInOut, animations: {

self.layo

...

我认为暂停是理想的。 var autoOpen = setTimeout(function() {

$(".rope").trigger("click");

},2000);

一定要在你的$(".rope").click(...)里面添加它$(".rope").click(...)功能： clearTimeout(autoOpen);

这将确保如果用户手动点击，它将取消“两秒后自动打开”的东西，否则可能会干扰;) A timeout would be ideal for this, I

...