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

Posted by: Guest on July-28-2020

Source

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

Code answers related to "text change animation css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Answers for "text change animation css"

Code answers related to "text change animation css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us