时间戳

首页 > 解决方案 > 如何使动画代码在 css 中工作？[代码对我不起作用...]

html - 如何使动画代码在 css 中工作？[代码对我不起作用...]

问题描述

我似乎找不到我的错误，你能帮帮我吗？

我已经放了-webkit-前缀，所有元素都是有效的

这是代码：

 div {
width:200px;
height:200px;
background-color:red;

-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;

}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>

我预计它会移动，但我不知道代码中的错误是什么

标签： htmlcss

解决方案

你需要添加 position :relative;到你的CSS

div {
width:200px;
height:200px;
background-color:red;
 position :relative;
-webkit-animation: easter 5s infinite;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation: easter 5s infinite;
}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<div>
hi
</div>
</body>

推荐阅读