我有一个动画，你可以在这里看到: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 时，它们都相互堆叠在一起，这是一团糟。静态不是真的可用，等等......
我的问题是，我怎样才能正确地实现同样的动画，同时正确地隔开动画文本，使其在空间内居中？我不想在 left: #px 中对每一段文本进行硬编码，因为最终文本可能会发生变化，动画需要考虑到这一点。
另请注意，我不希望在我的解决方案中使用 Javascript 或 jQuery。
提前致谢!
最佳答案
你应该使用 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 动画和定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35926241/