如何使用 css 动画淡入和淡出计时器上的文本

Question

我需要淡入文本列表，然后使用 css 逐渐淡入 div 中的每个文本。这是我使用 javascript 做的一个例子。任何帮助，将不胜感激。我已经阅读了一些关于如何使用 css 制作动画的示例，但不知道最佳实践或任何复杂的东西。

我想我需要创建一个带有隐藏溢出的包装器 div 和一个单独的 div，其中包含包装器中绝对位置的所有文本。然后动画 .text div 向上或向下以显示文本。我没有使用 css 动画的经验。

这是我想做的，但 css 而不是 javascript： http://jsfiddle.net/trav5567/8ejqsywu/

这是我的javascript：

var quotes = $(".whoiam").find('h2');
        var quoteIndex = -1;
        quotes.hide();
        function showNextQuote() {
            ++quoteIndex;
            console.log(quoteIndex);
            if(quoteIndex === quotes.length){
                console.log($(this));
                //console.log('index greater than or equal to h2 length');
                //$(this).fadeIn('200');
            }else{
                console.log('Kepp going');
            quotes.eq(quoteIndex % quotes.length)
                .fadeIn(500)
                .delay(500, checkIndex(quoteIndex,quotes.length))
                .fadeOut(500, showNextQuote);
            }
        }showNextQuote();
        function checkIndex(index, length){
            var length = length-1
            if(index === length){
                console.log('check good');
                end();
            }
        }

这是我的 HTML:

<div id="splash-wrapper">
        <div class="row">
            <div class="small-12 columns">
                <h1>Travis M. Heller</h1>
                <div class='whoiam'>
                    <h2>Front End Developer</h2>
                    <h2>Illustrator</h2>
                    <h2>Web Master</h2>
                    <h2>Front End Developer</h2>//This value will be the last to show on loop.
                </div>
                <button class="btn center gotoPortfolio">ENTER</button>
            </div>
        </div>
    </div>

Answer 1

只有 css 个动画的实验：http://jsfiddle.net/8ejqsywu/6/

有一个动画垂直移动文本列表，另一个动画淡入淡出文本。困难在于同步它们！

#container{
    overflow:hidden;
    height:48px;
}
.whoiam{
    -webkit-animation: move;
    position:relative;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
    -webkit-animation-delay: 0.5s
}
h2{ height:48px;margin:0;padding:0}
@-webkit-keyframes move {
    0% { margin-top: 0em; }
    25% { margin-top: -48px; }
    50% {margin-top: -96px;}
    75% {margin-top: -144px; }
    100% {margin-top: 0;}
}

h2{
    -webkit-animation: fade;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes fade {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

如何使用 css 动画淡入和淡出计时器上的文本

How to fade in and fade out text on a timer using css animations

css

css-animations