Help with CSS animation

HTML & CSS
1

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.

2

What does the html of this portion look like?

3

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
4

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
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.