關於第二個對象的相同動畫不起作用

我有一個文本「Hello」，另一個是寫在HTML上的「World」，然後我在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; 
     } 
}

來源

2014-03-04 brettbrdls

去除#second.floating的bottom: 0;似乎使動畫作品與230%一個top值。這是一個非常小的運動。

#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

更新與評論

來源

2014-03-04 13:38:01

但是是否可以使動畫在230％的頂部顯示？ – brettbrdls

我有我們學校的項目網站，我在這裏用作「世界」的第二個對象需要在230％，因爲我設計的東西。我們可以製作兩個div ID來使用一個div類，以便我們要使用的相同動畫的代碼不會被重複使用，而是兩個div ID將與維護位置一起使用:-) – brettbrdls

The 230％的頂部不應該是動畫的問題，如果它不能在你的網頁上工作，這可能是另一個問題。也許其他CSS重寫它？您可以通過在CSS中使用樣式創建類並將其應用於兩個元素來避免重複代碼。 –