Question

我有一个文本“Hello”，另一个是“World”，它是用HTML编写的，然后我在CSS上为这两个文本添加了一个动画。第一个对象是“你好”正在工作，但似乎另一个对象“世界”没有，我真的不知道这背后的问题是什么。顺便提一下这里的全部细节：

HTML

<html>
 <body>
   <link rel="stylesheet" type="text/css" href="sample.css">
   <div id="first" class="floating">Hello</div>
   <div id="second" class="floating">World</div>
   <p>hhtrhhthtrhhtrhtrhtrhtrhth<br>
   gggregegg5tg5tgrg5trgrghtrhtrhtrhth<br>
   frgfergregegtrghtrhththrth<br>
   rgregergergjertgjoeruiguoerhjguhjeruih<br>
   fuhefuiwhfuihweruifhuhfureheo<br>
   jhfhufiuhufhurhfowfohweof<br>
   hjfyuedfiedf<br>
   fnheuihferifheruhfuergf</p>
 </body>
</html>

CSS

#first.floating{
    position: absolute;
    font-size: 100%;
    top: 52%;
    bottom: 0;
    left: 42.5%;
    right: 0;
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(8%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(8%);  
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}
#second.floating{
    position: absolute;
    font-size: 100%;
    top: 230%;
    bottom: 0;
    left: 42.5%;
    right: 0;
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(8%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(8%);  
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}
p {
    position: absolute;
    font-size: 100%;
    top: 290%;
    bottom: 0;
    left: 42.5%;
    right: 0;
        }
}

Answer 1

从bottom: 0;移除#second.floating似乎使动画的top值为230%。这是一个非常小的运动。

#second.floating{
    position: absolute;
    font-size: 100%;
    top: 230%;
    left: 42.5%;
    right: 0;
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

JSFiddle

已更新，其中包含评论反馈

Answer 2

你的动画是有效的。动画试图在其顶部位置和底部位置之间设置8％的位置动画。第二个浮动div的顶部位置为230％，因此与底部位置有效相同，因此它没有任何动画效果。如果您将顶部位置更改为小于100％，那么您应该看到一些动作

第二个对象上的相同动画不起作用

2 个答案: