HTML中的文字動畫

我有兩段文字。我想動畫這個文本。我真正想要的是在x軸上從左側移動第一段，從右側移動到第二段。HTML中的文字動畫

我的代碼只能用於一個方向，無論是向左還是向右。

這裏：

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#text { 
     position:relative; 
     -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
     from {top: 200px;} 
     to {top: 0px;} 
     } 

@keyframes mymove { 
     from {top: 0px;} 
     to {top: 100px;} 
     } 

#text1 { 
     position:relative; 
     -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
     from {right: -200px;} 
     to {right: 0px;} 
     } 

@keyframes mymove { 
     from {top: 0px;} 
     to {top: 100px;} 
     } 

</style> 
</head> 
<body> 
     <p id="text">Some text goes here</p> 
     <p id="text1">text display animation</p> 
</body> 
</html>

我想第二款從右到左，從左至右第一個移動。可能的解決方案是什麼？

來源

2015-01-07 DDay

正是由於 'mymove' 的重名。爲每個動畫使用一些唯一的ID。 –

DEMO

#text { 
     position:relative; 
     -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
     from {left: 200px;} 
     to {left: 0px;} 
     } 

@keyframes mymove { 
     from {left: 200px;} 
     to {left: 0px;} 
     } 

#text1 { 
     position:relative; 
     -webkit-animation: mymove1 infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove1 infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove1 { 
     from {right: 200px;} 
     to {right: 0px;} 
     } 

@keyframes mymove1 { 
     from {right: 200px;} 
     to {right: 0px;} 
     }

來源

2015-01-07 06:28:14 himanshu

謝謝它適合我！如果這應該只是一次，那麼它應該停止到某個特定的位置。只是給我一個提示。我會自己做。 btw謝謝！ – DDay

剛從代碼 – himanshu

＃中刪除無限#text { position：relative; -webkit-animation：mymove; -webkit-animation-duration：2s; 動畫：mymove; 動畫持續時間：2s; } – himanshu

在CSS裏面#text添加

-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */ 
animation-direction: reverse;

http://jsfiddle.net/sxscmhy7/

來源

2015-01-07 06:27:55 AtanuCSE

HTML中的文字動畫

回答

相關問題