Change text with a CSS3 animation?

前端未结

关注

 2  712

In my website I want to have a header that fades in and out, then in with different text, then out, then back to normal (looped). Here\'s how I would like it to work:

CSS

h1:before{
    content: 'Original Text';
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    25% {font-size:570%; opacity:0;}
    50% {font-size:600%; opacity:1;}
    65% {font-size:570%; opacity:0;}
    80% {font-size:600%; opacity:1; content: "Changed Text"}
    90% {font-size:570%; opacity:0;}
    100% {font-size:600%;opacity:1; content: "Original Text"}
}

The other way you could do this is by having two elements in the HTML and toggling between them. You'd need two animations to be working together to do this or you might be able to just offset one animation, like this:

HTML

<header>
    <h1 class="headtext" id="text1">Original Text</h1>
    <h1 class="headtext" id="text2">Changed Text</h1>
</header>

CSS

.headtext{
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#text2{
    animation-delay: 2s;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    50% {font-size:0; opacity:0;}
    100% {font-size:600%;opacity:1;}
}

I've reduced the font-size to 0 to give room for the other text to come in. This may be a different effect than you might want though.

0 讨论(0)

[愿得一人]

2020-12-28 10:25

Hour ago, been stuck with same question but my decision is this. Just pasted a part of my own code. Check it out, guys!

body {
	margin: 0;
	font-family: sans-serif;
}

#wrapper {
	background-color: #051E3E;
	height: 100vh;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

#hi {
	animation: pulse 5s;
}

@keyframes pulse {
	0% {
	color: #051E3E;
	}
	10% {
		color: #051E3E;
	}
	30% {
		color: white;
	}
	50% {
		color: #051E3E;
	}
	60% {
		color: #051E3E;
	}
	80% {
		color: white;
	}
	100% {
		color: #051E3E;
	}
}

#hi:after {
	content: "";
	animation: spin 5s linear;
}

@keyframes spin {
  0% { content:"Hi"; }
  100% { content:"How do you like it?"; }
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	
	<div id="wrapper">
		<p id="hi"></p>
	</div>
	
</body>
</html>

0 讨论(0)