css 元素淡出淡入
Paradoxically, delaying elements so that they appear one after another can make a web page feelfaster: visitors gain the impression that a site delivers a "smoother" experience by interacting with transitioned elements.
矛盾的是，延迟元素以便使其一个接一个地出现可以使网页感觉更快：访问者获得的印象是，网站通过与过渡元素进行交互来提供“顺畅”的体验。
Before creating this effect, we should prepare our markup. In the example above, I have a series of photographs inside adiv:
在创建此效果之前，我们应该准备我们的标记。 在上面的示例中，我在div内有一系列照片：
<div id="fds"><img src="tuwanek-sunshine-coast-bc.jpg" alt="Tuwanek Sunshine Coast"><img src="hornby-island-shoreline.jpg" alt="Hornby Island shoreline"><img src="mt-baker-washington.jpg" alt="Mt Baker, Washington"><img src="nelson-bridge.jpg" alt="Nelson Bridge, Vancouver"><img src="golden-skies-victoria.jpg" alt="Golden skies, Victoria"><img src="first-beach-vancouver.jpg" alt="First beach, Vancouver"></div>
The base CSS is very simple:
基本CSS非常简单：
#fds {font-size: 0;}#fds img {width: 33.33%; opacity: 0;}
(Note the use offont-size: 0to eliminate every last little extra space inside the<div>).
(请注意使用font-size: 0来消除<div>内的最后一点多余的空间)。
使用纯CSS创建演示序列 (Creating a presentation sequence with pure CSS)
A sequential fade-in sequence can be created with a keyframe animation and the CSSanimation-delayproperty. You’d typically call on the animation using incrementally greater delay values for each element. (Note that I’ve removed vendor prefixes to keep the code simple).
可以使用关键帧动画和CSSanimation-delay属性创建顺序的淡入序列。 通常，您会为每个元素使用逐渐增加的延迟值来调用动画。 (请注意，为了使代码简单，我删除了供应商前缀)。
@keyframes fdsseq {100% { opacity: 1; }}#fds img {animation: fdsseq .5s forwards;}#fds img:nth-child(1) {animation-delay: .5s;}#fds img:nth-child(2) {animation-delay: 1s;}#fds img:nth-child(3) {animation-delay: 1.5s;}…
While this approach works, it has a few disadvantages.
尽管此方法有效，但有一些缺点。
遇到CSS的局限性 (Encountering The Limitations of CSS)
The pure CSS approach makes it difficult to change the timing of the animation for several reasons:
纯CSS方法使更改动画的时间安排变得困难，原因有以下几种：
Altering thedelayvalue for an element at the beginning will force you to rewrite the style declarations for subsequent elements.
在开始时更改元素的delay值将迫使您重写后续元素的样式声明。
The CSS also does not scale well: the more images you add, the more lines of code you have to write. CSS也不能很好地扩展：添加的图像越多，必须编写的代码行越多。 There is no incremental delay property for CSS; nor can we depend on element loading to display elements in sequence: bandwidth, load order prioritization and connection speeds vary far too much to create a reliable experience. CSS没有增量延迟属性。 我们也不能依靠元素加载来按顺序显示元素：带宽，加载顺序优先级和连接速度相差太大，无法创建可靠的体验。
Right now, the best method to use if you have more than a few elements to fade in is to implement the presentation with JavaScript.
现在，如果要淡入多个元素，最好的方法是使用JavaScript来实现演示。
制作诱人的动画 (Make An Inviting Animation)
The image transition sequence every time the page is loaded or replaced. For that reason, it is important that you make the presentation complete as quickly as possible, taking no more than a few seconds to fade in all the images. While a slow, graceful introduction may look great to you, it will only serve to annoy and frustrate your visitors.
每次加载或替换页面时的图像转换顺序。 因此，重要的是要使演示文稿尽快完成，所有图像的褪色时间不超过几秒钟。 缓慢而优美的介绍可能对您来说很不错，但这只会使您的访客烦恼和沮丧。
翻译自: /630/Fade-In-Elements-Sequentially-with-CSS
css 元素淡出淡入
