CODEWITHSUNDEEP
cssanimationcss-position
solid90
solid90

Reputation: 127

CSS Animation & Positioning issue

I have an animation you can see here: http://codepen.io/bchrisman/pen/OMKJNm

Animation:

@keyframes fadingText {
0% {
  opacity: 0;
}
12% {
  opacity: 1;
}
24% {
  opacity: 0;
 }
100% {
  opacity: 0;
 }
}

My issue lies somewhere with the positioning on this div

div[id^="txtAni"] {
  top: 2px;
  position: absolute;
}

When I use position: relative they all stack on each other which is a mess. Static is not really usable, etc...

My question is, how can I properly achieve this same animation but properly space out the animated text so that it is centered within the space? I do not want to hard code in left: #px for each individual piece of text because eventually the text may change and the animation needs to account for that.

Also note, I do not wish to use Javascript or jQuery for my solution.

Thank you in advance!

Upvotes: 1

Views: 196

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106058

you should use em values instead px to size your animate box (text inside than can resize via zoom or a missing font ).

vertical-align top or bottom might be more efficient than middle here. You can set height of a line (the box as well) via line-height:Xem;.

the first div could be set in relative...

@-webkit-keyframes fadingText {
    0% {
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    24% {
      opacity: 0;
     }
    100% {
      opacity: 0;
     }
    }
    @keyframes fadingText {
    0% {
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    24% {
      opacity: 0;
     }
    100% {
      opacity: 0;
     }
    }
    body {
      background: #333;
      color: #fff;
      font-size: 2em;
    }
    div {
      display: inline-block;
      vertical-align: middle;
    }
    .animate {
      display: inline-block;
      overflow: hidden;
      position: relative;
      width: 3.5em;/* make sure it holds the longest word */
      vertical-align: top;
      text-align:center;
    }
    div[id^="txtAni"] {
      bottom:0;
      position: absolute;
      vertical-align:top;
      left:0;
      right:0;
    }
div[id^="txtAni"]:first-of-type { /* useless since animate got a width set */
  position:relative;
  color:red;
}
    #wrapper {
      border:solid 1px #0f0;
      box-sizing: border-box;
      overflow: hidden;
      height: 60px;
      padding: 4px;
      position: relative;
      line-height:1.4em;
    }
    .fadeIn1 {
      -webkit-animation: fadingText 7.5s ease-in-out;
              animation: fadingText 7.5s ease-in-out;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
    .fadeIn2 {
      -webkit-animation: fadingText 7.5s ease-in-out 1.5s;
              animation: fadingText 7.5s ease-in-out 1.5s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
    .fadeIn3 {
      -webkit-animation: fadingText 7.5s ease-in-out 3s;
              animation: fadingText 7.5s ease-in-out 3s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
    .fadeIn4 {
      -webkit-animation: fadingText 7.5s ease-in-out 4.5s;
              animation: fadingText 7.5s ease-in-out 4.5s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
    .fadeIn5 {
      -webkit-animation: fadingText 7.5s ease-in-out 6s;
              animation: fadingText 7.5s ease-in-out 6s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
    }
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="wrapper">
      <div id="inner">here's some 
        <div class="animate"> 
          <div id="txtAniText" class="fadeIn1">Content</div>
          <div id="txtAniVideo" class="fadeIn2">Videos</div>
          <div id="txtAniAnimation" class="fadeIn3">Music</div>
          <div id="txtAniStuff" class="fadeIn4">Books</div>
          <div id="txtAniStuff" class="fadeIn5">Articles</div>
        </div>
      </div>
      <div>yada yada yada</div>
    </div>
  </body>
</html>

If you give a background or different colors to text added, difference of length won't bother as much. http://codepen.io/gc-nomade/pen/RaRVrX

Upvotes: 1

Related Questions