Question

我有一个动画，你可以在这里看到：http://codepen.io/bchrisman/pen/OMKJNm

动画：

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

我的问题在于对这个div的定位

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

当我使用position: relative时，它们都堆叠在一起，这是一团糟。静态不是真的可用，等等......

我的问题是，如何才能正确地实现相同的动画，但是能够正确地将动画文本空间化，以使其在空间中居中？我不想在左边硬编码：#px用于每个单独的文本，因为最终文本可能会改变，动画需要考虑到这一点。

另请注意，我不希望使用Javascript或jQuery作为我的解决方案。

提前谢谢！

Answer 1

你应该使用em值代替px来调整你的动画框大小（里面的文字可以通过缩放或丢失字体调整大小）。

vertical-align top或bottom可能比middle更有效。您也可以通过height设置line-height:Xem;一行（该框也是如此）。

可以在div ...

中设置第一个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>

如果您为添加的文字提供背景或不同的颜色，长度的差异将不会太多。 http://codepen.io/gc-nomade/pen/RaRVrX

CSS动画＆amp;定位问题

1 个答案: