it-swarm.com.de

Text mit einer CSS3-Animation ändern?

In meiner Website möchte ich eine Kopfzeile haben, die ein- und ausgeblendet wird, dann mit anderem Text, dann heraus und dann wieder normal. Ich möchte, dass es funktioniert:

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

Ich habe jedoch keine Möglichkeit gefunden, den Text in einer CSS3-Animation zu ändern. Ist das möglich?

7
user7548189

Es gibt zwei Möglichkeiten, dies zu tun. Zum einen muss der Inhalt von einem Pseudoelement verwaltet werden. Dies bedeutet, dass der angezeigte Inhalt innerhalb von CSS angewendet wird. so was:

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

Die andere Möglichkeit, dies zu tun, besteht darin, zwei Elemente im HTML-Code zu haben und zwischen ihnen umzuschalten. Sie benötigen zwei Animationen, um zusammen zu arbeiten, oder Sie können eine Animation wie folgt verschieben:

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

Ich habe den font-size auf 0 reduziert, um Platz für den anderen Text zu schaffen. Dies könnte jedoch einen anderen Effekt haben, als Sie vielleicht möchten.

7
Donnie D'Amato

Vor einer Stunde habe ich dieselbe Frage gestellt, aber meine Entscheidung ist diese. Ich habe gerade einen Teil meines eigenen Codes eingefügt. Probiert es aus, Leute!

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

Also bin ich auf diese Frage gestoßen, um eine Lösung zu finden. Ich hatte eine Einschränkung, bei der ich den Text nicht mit Inhalt ändern konnte: ''; Also habe ich mir folgendes ausgedacht:

@keyframes fade-out-fade-in {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-fade-out {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Dann verwendet:

animation: fade-in-fade-out 20s linear infinite both;

und für den zweiten Text

animation: fade-out-fade-in 20s linear infinite both;

wo benötigt.

Hoffe das hilft jemandem in der Zukunft.

0
ProfClank