Question

我需要在没有js的情况下发短信动画，这意味着css3效果。我想要文本fadein并向右滑动一些像素。我试过下面的代码：

<!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结束动画后... 完成动画后我需要删除不透明度。

有可能吗？

Answer 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;  
}

这将在不透明度为1后停止动画。

CSS3文本动画问题

1 个答案: