如何在網站加載時發生CSS動畫

好吧，我擁有的是我想要移動的圖像，並保留在其最終位置。我目前有編程，使圖像做一個動畫時，它的懸停。 HTML：如何在網站加載時發生CSS動畫

<html> 
<head> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
    <div id="wrapper"> 
     <div class="move"></div> 
    </div> 
</body>

CSS：

#wrapper { 
width: 1000px; 
margin: 0 auto; 
} 

.move { 
width: 150px; 
height: 150px; 
background-color: red; 
position: absolute; 
top: 0; 
left: 0; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-o-transition: all 0.3s; 
} 

.move:hover { 
top: 20; 
left: 20; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-o-transition: all 0.3s; 
}

無論如何，我想知道的方式有轉變發生的那一刻的網站負載，然後留在位置定義在移動：懸停

來源

2015-02-18 Noah Cagle

添加JSFiddle到您的問題，使事情更清楚 – Ram 2015-02-18 00:23:10

可以回答你的問題的代碼示例：

動畫在頁面加載時啓動。
動畫停止時帶班.move

請在這裏測試用戶移動鼠標霍夫元素：

http://jsbin.com/cejuxoyaco/1/

適用於Chrome，Safari瀏覽器，歌劇。

說明：使用@keyframes來定義您的動畫。使用animation-play-state: paused;停止動畫時move:hover。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
<style> 
#wrapper { 
width: 1000px; 
margin: 0 auto; 
} 

@keyframes anim { 
    from {background: red;} 
    to {background: yellow;} 
} 

.move { 
    width: 150px; 
    height: 150px; 
    background-color: red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    -webkit-animation: myfirst 5s; 
    animation: myfirst 5s; 
} 

@-webkit-keyframes myfirst { 
    from {width: 50px;} 
    to {width: 150px;} 
} 

@keyframes myfirst { 
    from {width: 50px;} 
    to {width: 150px;;} 
} 

.move:hover { 
top: 20; 
left: 20; 
-webkit-animation-play-state: paused; 
animation-play-state: paused; 
} 
</style> 


</head> 
<body> 

    <div id="wrapper">wrapper 
     <div class="move">move</div> 
    </div> 
</body> 
</html>

來源

2015-02-18 08:57:20 GibboK

如何在網站加載時發生CSS動畫

回答

相關問題