text change animation 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"}
}
4
2
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
Thank you!
2
0
Are there any code examples left?
New code examples in category CSS