Question

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

我在想我需要创建一个包含div的包装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动画在计时器上淡入和淡出文本

1 个答案: