how to animate a specific text in keyframes code example

Example 1: keyframe in css

@keyframes mymove {
  0% {top: 0px;}
  50% {top: 50px;}
  75% {top: 40px;}
  100%{top: 0px;}
}

Example 2: 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"}
}

Tags:

Css Example