Question

好吧，我所拥有的是一张我想要移动的图像，并且一旦它存在就停留在最终位置。我目前有编程，使图像在其上空盘旋时动画。 HTML：

<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;
}

无论如何，我想知道一种方法，在网站加载的那一刻发生转换，然后保持在移动中定义的位置：悬停

Answer 1

可以回答您问题的代码示例：

加载页面时动画启动。
当用户使用类.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>

如何在网站加载时制作CSS动画

1 个答案: