Как сделать анимацию 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; 
}

Во всяком случае, я хотел бы знать способ иметь переход произойдет в момент нагрузки веб-сайт, а затем оставаться в положении, как определено в движении: hover

источник

2015-02-18 Noah Cagle

Добавлен JSFiddle к вашему вопросу, чтобы сделать вещи более понятными – Ram

Пример кода, который мог бы ответить на ваш вопрос:

Начало анимации при загрузке страницы.
анимация остановка при перемещении пользователя мыши дрейфе элемент с классом .move

Пожалуйста, проверить его здесь:

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

Работает на Chrome, Safari, Opera.

Пояснение: Используйте @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 в момент загрузки сайта

ответ

Смежные вопросы