it-swarm.com.ru

Изменить текст с анимацией CSS3?

На моем веб-сайте я хочу иметь заголовок, который постепенно исчезает, затем с другим текстом, затем с выходом, затем возвращается к обычному (зацикливается). Вот как я хотел бы, чтобы это работало:

h1 {
    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; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}

Однако я не нашел способа изменить текст в анимации CSS3. Это возможно?

7
user7548189

Есть два способа сделать это. Одним из них является управление контентом псевдоэлементом. Это означает, что отображаемый контент будет применен внутри CSS; как это:

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"}
}

Другой способ сделать это - добавить в HTML два элемента и переключаться между ними. Для этого вам понадобятся две анимации, или вы можете просто сместить одну анимацию, например так:

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

Я сократил font-size до 0, чтобы освободить место для ввода другого текста. Однако это может отличаться от ожидаемого.

7
Donnie D'Amato

Час назад застрял с тем же вопросом, но мое решение таково. Просто вставил часть моего собственного кода. Проверьте это, ребята!

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>

2
ross rykov