CSS 动画和定位问题

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 时，它们都相互堆叠在一起，一团糟。静态不是真的可用，等等...

我的问题是，我怎样才能正确地实现相同的动画，同时正确地 space 出动画文本，使其在 space 中居中？我不想在 left: #px 中对每个 individual 文本进行硬编码，因为最终文本可能会发生变化，动画需要考虑到这一点。

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

提前致谢！

Answer 1

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

vertical-align top 或 bottom 可能比 middle 更有效。您可以通过 line-height:Xem;.

设置一行（也包括框）的 height

第一个 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 动画和定位问题

CSS Animation & Positioning issue

css

animation

css-position