Мне нужна текстовая анимация без 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 после окончания анимации. Мне нужно удалить непрозрачность после завершения анимации.
Является ли это возможным ??
