转换不透明度延迟

我想在3秒后淡出一个元素。我目前正在使用动画来做到这一点，但我刚刚了解到转换延迟，所以我相信我可以删除动画并通过转换完成。这可能吗？转换不透明度延迟

我原来的代码是：

.foo { 
    animation: fadeOut 3s cubic-bezier(0.645, 0.045, 0.355, 1.000) 
} 
@keyframes fadeOut { 
    80%{ 
     opacity: 1 
} 
    100% { 
     opacity: 0 
} 
}

这是我尝试在转变：

.announcement { 
    display: block; 
    font-size:22px; 
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-delay :3s; 
    opacity:0; 
} 

<div class="announcement">asdasd</div>

http://jsbin.com/vejewukusi/edit?html,css,output

这是可能的，而不添加其他的CSS类？

为了使事情更清楚，我想追加一个div与一个类，等待3秒，然后淡出，并做到这一点，而不使用关键帧。

来源

2015-08-15 ditto

对于要激活的过渡，您需要更改相关属性 - 不透明度。这意味着您必须通过分配另一个类来更改不透明度，或者直接通过JS对其进行更改。 –

https://jsfiddle.net/vovf4hdg/任何想法我做错了什么？延迟不起作用。 – ditto

你没有触发转换。添加测试类只需渲染.announcement - https://jsfiddle.net/OriDrori/vovf4hdg/7/ –

这是否解决您的问题：JSFiddle？我添加了一个动画和一个小函数来为不透明度设置动画效果：

.test { 
    animation: opacity 1s; 
} 
@keyframes opacity { 
    from { opacity: 0.5; } 
    to { opacity: 1; } 
}

来源

2015-08-15 18:48:05

转换不透明度延迟

回答

相关问题