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

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

无论如何，我想知道一种在网站加载时发生转换的方法，然后保持在 move:hover

中定义的位置

Answer 1

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

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

How to make CSS animation happen the moment the website loads

css

webkit

motion

divider