使用CSS动画而不是循环使用gif

我只想基本显示文本并隐藏，然后下一个文本并隐藏，然后上一个文本并隐藏并重复。我怎样才能做到这一点？我一直在看代码，但我仍然迷失。任何帮助是极大的赞赏！使用CSS动画而不是循环使用gif

我的代码：

<style> 
    #myArea { 
    height:250px; 
    width:300px; 
    position:relative; 
    } 

    .text { 
    position:absolute; 
    z-index:1; 
    bottom:20px; 
    left:10px; 
    } 
</style> 
<body> 
    <div id="myArea"> 
    <img src="images/backgrnd.jpg" /> 
    <div id="txt1" class="text"> 
     <img src="images/text1.png" /> 
    </div> 
    <div id="txt2" class="text"> 
     <img src="images/text2.png" /> 
    </div> 
    <div id="txt3" class="text"> 
     <img src="images/text3.png" /> 
    </div> 
    </div>

来源

2016-03-14 Damien

你可能寻找steps计时功能？它提供了一种类似gif的方式来为图像集制作动画效果！

有一个例子：https://jsfiddle.net/simurai/CGmCe/

从MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

希望它能帮助！

来源

2016-03-15 06:17:23 Hitmands

有趣的观点。建议'steps'听起来合乎逻辑，但在应用于多个元素时不会产生相同的效果。它最适合于精灵和单个元素。在使用多个元素时，关键帧必须以这样的方式进行编码，以便在动画时其余部分保持隐藏状态。（*我不是揣测你的答案，只是说明OP的好处*） – Harry

不是我在找什么，但超级酷无一例外 – Damien

实现你正在寻找它的效果是相当简单的。所有需要的是让您将图像完全放在彼此的顶部，然后添加一个动画，相应地更改图像（或其容器）的opacity。

动画在一个循环中的多个元素时，关键部件是

确保第二和后续元素的动画开始后，以前所有的元素都完成了自己的动画和
确保所有之前的元素将保持最终状态，直到其他元素完成其动画（否则它们会混淆动画）。

第一部分可以通过，而第二部分是通过相应地设置@keyframes取得的元件使用渐进animation-delay来实现。在这里，由于有3个图像，每个图像的动画应该以33％的标记完成（因为在另外66％中，其他2个将执行它们的动画）。 33％的州应维持到100％。

（如果你有4张图片，它应该完成25％等。）

#myArea { 
 
    height: 250px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 
.text { 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 20px; 
 
    left: 10px; 
 
    opacity: 0; 
 
    animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */ 
 
} 
 
.text:nth-of-type(2) { 
 
    animation-delay: 4s; /* this must start after first has faded-out */ 
 
} 
 
.text:nth-of-type(3) { 
 
    animation-delay: 7s; /* this must start after second has also faded-out */ 
 
} 
 
@keyframes fade-in-out { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    11%, 22% { 
 
    opacity: 1; 
 
    } 
 
    33%, 100% { 
 
    opacity: 0; 
 
    } 
 
}

<div id="myArea"> 
 
    <img src="http://lorempixel.com/300/250/abstract/2" /> 
 
    <div id="txt1" class="text"> 
 
    <img src="http://lorempixel.com/200/200/animals/1" /> 
 
    </div> 
 
    <div id="txt2" class="text"> 
 
    <img src="http://lorempixel.com/200/200/animals/2" /> 
 
    </div> 
 
    <div id="txt3" class="text"> 
 
    <img src="http://lorempixel.com/200/200/animals/3" /> 
 
    </div> 
 
</div>

来源

2016-03-15 06:11:02 Harry

一如既往的好答案。在这种动画中将延迟设置为负值非常有用。它有助于确保动画的所有周期工作相同 – vals

谢谢@vals。明白“你是在暗示什么”而不是“为什么”。是否有任何文章或链接可以阅读更多内容？如果是，请分享，明天早上我会看看:) – Harry

我没有手头上的参考资料，我可以分享...但我看过一些关于动画的问题，他们说“我的动画第一时间，但在第二次迭代时出错“通常，如果设置正向动画延迟，则初始状态非常重要。但是，如果您设置负向延迟，则仅**使用动画属性。将尝试找到一个例子:-) – vals

使用CSS动画而不是循环使用gif

回答

相关问题