Pure Css Responsive Text Effect

my question is very simple. Consider the following CodePen. Is it possible I can get the same result just using css? in other words, how would this be done without using javascrip?

Solution 1:

Yes. Basically that is possible!

But indeed it is really hard work to calculate the animation to every damned letter ... but I am not quite sure if there are not still some animations studios who are playing arround with such things ...

So, if you want to exactly like do that (= with letter animating) I would prefer to use the really nice JS snippet (thx for showing that here).

But if you are however not able/willing to use JS in your project and you would like to do SOMETHING like that you can realize a COMPLETE WORD CHANGING easily in CSS using @keyframes animations.

See a quick and dirty example for expalanation below.

Note: The animation is really simple! Of course you can do much cooler effects using rotations, backgrounds, etc. If you like just adapt example to your imaginations :-)

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

.text {
  position: relative;
  margin: 20px;
  font-size: 1.5rem;
  line-height: 1.2em;
}

.wordChange__wrapper {
  display: relative;
}

.wordChange__changer {
  display: inline-block;
  position: absolute;
  top: -100%;
  width: 220px;
  opacity: 0;
  -webkit-animation: wordchanger;
          animation: wordchanger;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.wordChange__element_1 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.wordChange__element_2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.wordChange__element_3 {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.wordChange__element_4 {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

.wordChange__element_5 {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

@-webkit-keyframes wordchanger {
  0% {
    top: -100%;
    opacity: 0;
  }
  4.5% {
    opacity: 0;
  }
  9% {
    top: 0;
    opacity: 1;
  }
  20% {
    top: 0;
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  24.5% {
    opacity: 0;
  }
  29% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes wordchanger {
  0% {
    top: -100%;
    opacity: 0;
  }
  4.5% {
    opacity: 0;
  }
  9% {
    top: 0;
    opacity: 1;
  }
  20% {
    top: 0;
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  24.5% {
    opacity: 0;
  }
  29% {
    top: 100%;
    opacity: 0;
  }
}
.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}

<divclass="text"><pclass="wordChange__wrapper">Nachos are&nbsp;<spanclass="wordChange__changer wordChange__element_1 wisteria">tasty.</span><spanclass="wordChange__changer wordChange__element_2 belize">wonderful.</span><spanclass="wordChange__changer wordChange__element_3 pomegranate">fancy.</span><spanclass="wordChange__changer wordChange__element_4 green">beautiful.</span><spanclass="wordChange__changer wordChange__element_5 midnight">cheap.</span></p></div>