CSS3文本动画问题答案

【问题标题】：CSS3 text animation issueCSS3文本动画问题
【发布时间】：2013-12-06 13:15:41
【问题描述】：

我需要没有js的文字动画，意思是css3效果。我想要文本淡入淡出并从右向左滑动一些像素。我试过下面的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
#container header h1{
    float:left;
    padding:0 5px; margin:0;
-webkit-animation-name: slider; 
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
opacity: 0;
}

#container header h1.word2{animation-delay:0.5s; -webkit-animation-delay:0.5s;}
#container header h1.word3{animation-delay:1.0s; -webkit-animation-delay:1.0s;}
#container header h1.word4{animation-delay:1.5s; -webkit-animation-delay:1.5s;}
#container header h1.word5{animation-delay:2.0s; -webkit-animation-delay:2.0s;}
#container header h1.word6{animation-delay:2.5s; -webkit-animation-delay:2.5s;}
#container header h1.word7{animation-delay:3.0s; -webkit-animation-delay:3.0s;}
#container header h1.word8{animation-delay:3.5s; -webkit-animation-delay:3.5s;}
#container header h1.word9{animation-delay:4.0s; -webkit-animation-delay:4.0s;}
#container header h1.word10{animation-delay:4.5s; -webkit-animation-delay:4.5s;}

@-webkit-keyframes slider {
       from {-webkit-transform: translateX(175px); opacity: 0;}
       to{-webkit-transform: translateX(0px); opacity: 1;}        
}

</style>
</head>

<body>

<div id="container">
            <header>            
                <h1 class="word1">One</h1>
                <h1 class="word2">Two</h1>
                <h1 class="word3">Three</h1>
                <h1 class="word4">Four</h1>
                <h1 class="word5">Five</h1>
                <h1 class="word6">Six</h1>
                <h1 class="word7">Seven</h1>
                <h1 class="word8">Eight</h1>
                <h1 class="word9">Nine</h1>
                <h1 class="word10">Ten</h1>
            </header>
          </div>

</body>
</html>

但我面临的问题是动画结束后文字文字取不透明度：0.. 动画完成后我需要移除不透明度。

有可能吗？？

【问题讨论】：

#container header h1 中写着opacity: 0; 的那部分？删除它。
如果我删除 opacity:0;正如你所说，输出与预期完全不同......
嗯，这很奇怪。你删对了吗？（第一个）

标签： css animation css-transitions

【解决方案1】：

像这样使用animation-fill-mode：

#container header h1{
    float:left;
    padding:0 5px; margin:0;
    -webkit-animation-name: slider; 
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    opacity: 0;  
}

这将在 opacity 为 1 后停止动画。

【讨论】：