0

I am trying to create an animation using CSS3 only which will display a list of items.

I've been able to create an animation that cycles through each item on the list, however, I cannot figure out a solution to having the animation end with the last item on the list displayed.

Essentially, I want the animation to end with the words "Johnney be good" displayed.

This has supposedly been asked and answered in: Stopping a CSS3 Animation on last frame

However, I cannot figure out if or how that solution can be applied to my problem. Thank for your help, it's very appreciated.

#sentence-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: serif;
    padding: 10px;
}
.sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.sentence span{
    color: #444;
    font-size: 200%;
    font-weight: normal;
}
.words{
    display: inline;
    text-indent: 10px;
}
.words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: rotateWord 12s 1 0s;
    -moz-animation: rotateWord 12s 1 0s;
    -o-animation: rotateWord 12s 1 0s;
    -ms-animation: rotateWord 12s 1 0s;
    animation: rotateWord 12s 1 0s;
}
.words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #6b969d;
}
.words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #6b969d;    
}
.words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #6b969d;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
<div id="sentence-wrapper">
                <div class="sentence">
                    <span>Johnney </span>
                    <div class="words words-1">
                        <span><em>smart</em></span>
                        <span><em>clever</em></span>
                        <span><em>awesome</em></span>
                         <span>be good</span>
                    </div>
                 
                  </div>
             
            </div>
Community
  • 1
  • 1
mmt
  • 30
  • 1
  • 7
  • Not sure but I think you need a different animation for the last element that only perform the entrance. Or, better, have different animations for leave and entrance and apply them as you need. – utnaf Feb 20 '17 at 16:38
  • Stopping at last keyframe won't help you because your keyframe settings indicate that the last state is `opacity: 0` (and that's your default state also). Also, by end with *be good* what exactly is the behaviour you intend? Should the *be good* just appear and stay without moving down like the others or should it move down and then at the end just abruptly display the words again? If former, you need to write a separate keyframe for that last element alone. If latter then it can be achieved with some tweaking of your existing keyframe. – Harry Feb 20 '17 at 16:39

3 Answers3

2

The "be good" <span> uses the same animation (rotateWord) as the other <span>s. Which ends with opacity: 0;. If you don't want "be good" to fade out after fading in, you should define a separate animation for it:

@keframes rotateWordFinal{
  0% { opacity: 0; }
  50% { opacity: 0; -webkit-transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0px);}
}

.words-1 span:nth-child(4){
  animation: rotateWordFinal 6s 1 9s;
}

Also: you're using all kind of prefixes for the animation properties, but not for the actual @keyframes. Better to keep that consistent.

Luuuud
  • 4,206
  • 2
  • 25
  • 34
1

You'll need to create a separate animation for the last span.

#sentence-wrapper{
  font-family:serif;
  margin:110px auto 0 auto;
  padding:10px;
  position:relative;
  width:80%;
}
.sentence{
  margin:0;
  text-align:left;
  text-shadow:1px 1px 1px rgba(255, 255, 255, 0.8);
}
.sentence span{
  color:#444;
  font-size:200%;
  font-weight:normal;
}
.words{
  display:inline;
  text-indent:10px;
}
.words-1 span{
  animation:rotateWord 12s 1 0s;
  color:#6b969d;
  opacity:0;
  overflow:hidden;
  position:absolute;
}
.words-1 span:nth-child(2){
  animation-delay:3s;
}
.words-1 span:nth-child(3){
  animation-delay:6s;
}
.words-1 span:last-child{
  animation-delay: 9s;
  animation-fill-mode: forwards;
  animation-name:rotateLast;
}
@keyframes rotateWord{
  0%,80%,100%{
    opacity:0;
  }
  2% {
    opacity:0;
    transform:translateY(-30px);
  }
  5%,17%{
    opacity:1;
    transform: translateY(0px);
  }
  20%{
    opacity:0;
    transform:translateY(30px);
  }
}
@keyframes rotateLast{
  0%{
    opacity:0;
  }
  2%{
    opacity:0;
    transform:translateY(-30px);
  }
  5%,100%{
    opacity:1;
    transform:translateY(0px);
  }
}
<div id="sentence-wrapper">
  <div class="sentence">
    <span>Johnney </span>
    <div class="words words-1">
      <span><em>smart</em></span>
      <span><em>clever</em></span>
      <span><em>awesome</em></span>
      <span>be good</span>
    </div>
  </div>
</div>
Shaggy
  • 6,696
  • 2
  • 25
  • 45
0

I've almost got it with animation-fill-mode and changing the 100% animation opacity to 1.

#sentence-wrapper {
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: serif;
  padding: 10px;
}

.sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.sentence span {
  color: #444;
  font-size: 200%;
  font-weight: normal;
}

.words {
  display: inline;
  text-indent: 10px;
}

.words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 12s 1 0s;
  -moz-animation: rotateWord 12s 1 0s;
  -o-animation: rotateWord 12s 1 0s;
  -ms-animation: rotateWord 12s 1 0s;
  animation: rotateWord 12s 1 0s linear backwards; /* all animations end at 0% value */
}

.words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b969d;
}

.words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b969d;
}

.words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  animation-fill-mode: forwards; /* This animation ends on 100% value */
  color: #6b969d;
  opacity: 0;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1; /* Changed from 0 to 1 */
  }
}
<div id="sentence-wrapper">
  <div class="sentence">
    <span>Johnney </span>
    <div class="words words-1">
      <span><em>smart</em></span>
      <span><em>clever</em></span>
      <span><em>awesome</em></span>
      <span>be good</span>
    </div>

  </div>

</div>
Digedu
  • 233
  • 1
  • 7