Help with CSS animation

This animation successfully slides text out from the left, across the web page, after a delay.

But, first, the text appears as soon as the page is accessed, then dispappears right before the successfully slide out.
I only want the text to appear when it slides out from the left. Here’s the code:

.item-1 {
	position: absolute;
	  display: block;
	  width: 60%;
		animation-duration: 20s;
		animation-timing-function:ease;
		animation-iteration-count: infinite;
		animation-delay: 10.5s;
	}

.item-1{
	animation-name: anim-1;
	font-size:1.0vw;
	color:#FFF;
}

@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
 8.3%,25% { left: 25%; opacity: 1; }
 33.33%, 100% { left: 110%; opacity: 0; }
}

Any help with having the text not first appear before the slide out animation, is appreciated.

What does the html of this portion look like?

Hi there ChrisjChrisj,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
 }
.item-1 {
    width: 60%;
	padding: 1em 0;
    margin: auto;
    background-color: #000;
    overflow: hidden;
 }
.item-1 span {
    display: block;
    font-size: 1em;
    color: rgba( 255, 255, 255, 0 );
    white-space: nowrap;
    animation: anim-1 20s 5s ease infinite ;
 }
@keyframes anim-1 {
    0% { transform:translate(-100% , 0 ); color: rgba( 255, 255, 255, 0 ); }
   25% { transform:translate(  25% , 0 ); color: rgba( 255, 255, 255, 1 ); }
33.33% { transform:translate(  25% , 0 ); color: rgba( 255, 255, 255, 1 ); }
  100% { transform:translate( 100% , 0 ); color: rgba( 255, 255, 255, 0 ); }
 }
</style>

</head>
<body> 

<div class="item-1"><span>This is a some text</span></div>

</body>
</html>

coothead

3 Likes

You could have just put the element out of sight to start with.

e.g.

.item-1 {
  left: -100%;
}

However @coothead has given you a better solution above anyway using transform which is much more performant that manipulating the left value.

Also note that your original version will give a massive horizontal scrollbar as you push the element out of the viewport but don’t hide the overflow unlike @coothead’s example

1 Like