CSS動畫/使用@KEYFRAMES將圖像向上移動屏幕

嗨我正在嘗試使用CSS在屏幕上移動圖像。目前，當我運行它時，只出現在頁面的頂部。這是我正在嘗試的代碼。我試圖在Chrome中運行這個。CSS動畫/使用@KEYFRAMES將圖像向上移動屏幕

<head> 

<style> 
#float{ 
width: 200px; 
height: 500px; 
position: relative; 
animation: floatBubble 2s inifnate; 
animation-directon: normal; 
} 


@keyframes floatBubble{ 
0% { 
     top:0; 
     -webkit-animation-timing-function: ease-in; 

    } 


    100% { 
     top: 500px; 
     animation-timing-function: ease-out; 
    } 

} 
</style> 

</head> 
<body style="background-color:#FF9900; color:#CC0033; text-align:center"> 

<div id="float"> 
<img src ="bub.png" height="100px" width="100px" alt="bubbles"> 
</div> 

</body>

來源

2013-05-28 user2241862

方式拼寫'infinite'夥伴。：P也，你有0％的供應商前綴，而不是100％？而且即時通訊假設你說，由於缺少其他廠商前綴，60％的人不使用Chrome/Safari？ – PlantTheIdea

試試這個：

Working Example

#float { 
    position: relative; 
    -webkit-animation: floatBubble 2s infinite normal ease-out; 
    animation: floatBubble 2s infinite normal ease-out; 
} 
@-webkit-keyframes floatBubble { 
    0% { 
     top:500px; 
    } 
    100% { 
     top: 0px; 
    } 
} 
@keyframes floatBubble { 
    0% { 
     top:500px; 
    } 
    100% { 
     top: 0px; 
    } 
}

來源

2013-05-28 17:03:54 apaul

謝謝你，這正是我想要做的。對此，我真的非常感激。 – user2241862

改變這種

animation: floatBubble 2s inifnate;

這個

animation: floatBubble 25s infinite;

另外，如果你想將它移到了屏幕，而不是500像素，改變-500px

來源

2013-05-28 16:39:04 bob

謝謝你的建議！ – user2241862

查看：

CSS：

<style> 
#float{ 
position: relative; 
-webkit-animation: floatBubble 2s infinite; 
    -webkit-animation-direction:alternate; 
    } 


@-webkit-keyframes floatBubble{ 
from{ 
     top:0; 
     -webkit-animation-timing-function: ease-in; 

    } 


    to { 
     top: 200px; 
     -webkit-animation-timing-function: ease-out; 
    } 

} 
</style>

我想這是你想要的東西;）

Demo

來源

2013-05-28 16:56:45 Arpit

謝謝我真的很感謝你徹底的迴應！這非常有幫助。 – user2241862

CSS動畫/使用@KEYFRAMES將圖像向上移動屏幕

回答

相關問題