在一个动画中的不同元素

问题描述：

他们有点复杂，但我认为仅靠CSS3就无法做到我想要的。在一个动画中的不同元素

我在标题中有三个图像，我希望通过在CSS动画中使用opacity来使图像显示fade-in fade-out效果。

我在想如果我可以在动画中选择嵌套元素并为它们设置动画效果。创建链式动画有点困难。

什么是你要完成？ – basement

我想让影像随着淡入淡出效果而改变＃ – Murtaza

我的回答能解决您的问题吗？你想要什么不同？我不明白你的问题。 – basement

答

尝试使用transition-delay属性来延迟动画。

对于实际的_animation_，您可能更愿意使用['animation-delay']（https://developer.mozilla.org/en/docs/Web/CSS/animation-delay）... – CBroe

这就是我我正在弄清楚如何平滑不同元素之间的动画。 – Murtaza

答

只需将动画规则应用于图像。使用animation-delay a chain可以产生效果。

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    background-color: #000; 
 
} 
 
img { 
 
    margin: auto; 
 
    width: 33.333%; 
 
    opacity: 0; 
 
    animation-name: fade; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes fade { 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
} 
 
img:nth-child(2) { 
 
    animation-delay: 0.5s; 
 
} 
 
img:nth-child(3) { 
 
    animation-delay: 1s; 
 
}

<img src="http://i.imgur.com/iyzGnF9.jpg"> 
 

 
<img src="http://i.imgur.com/iyzGnF9.jpg"> 
 

 
<img src="http://i.imgur.com/iyzGnF9.jpg">

我已经在想如何使用动画延迟了，让我们试试这个技巧。 – Murtaza

这是你想要完成的吗？ – basement

是的。我希望一张图像淡出，另一张淡入，类似于第三张图像。 – Murtaza

在一个动画中的不同元素

相关推荐