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
...