我是 html5 和 css3 的新手，我只是在玩弄不同的 css3 动画功能。谁能指出下面代码中的错误？从左 0px 到左 200px 的移动不起作用。
<!doctype html>
<html>
<head>
<title>
Experiment: animation with movements
</title>
<style>
footer{
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
@-moz-keyframes mymove {
from {left:50px;}
to {left:200px;}
}
@keyframes mymove {
from {left:50px;}
to {left:200px;}
}
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
最佳答案
将 position: relative; 添加到 footer CSS
footer {
position: relative;
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
@-moz-keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
@keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}<footer></footer>关于html - 动画不工作。从左边移动 :0px to left :200px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56295975/