html动画为什么无法运行?
代码在我的电脑上打开无法正常运行,目的是一个小方块从左移动到右边,没有过程直接跳到右边在网页中检查,演示动画的那几行代码都无法运行,
<!DOCTYPE html>
<html>
<head>
<title>移动</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: web;
animation-duration: 5s;
animation-timing-function: linear;
-webkit-animation-name:web;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
@keyframes web{
form {left: 0px;}
to {left: 200px;}
}
@-webkit-keyframes web{
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
检查是这个样子的
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
(animation-name: web;
animation-duration: 5s;
animation-timing-function: linear;)这三行代码被划掉的
-webkit-animation-name: web;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
} form是错的,from才是对的
拼写都拼错(汗)
from {
top: 0px;
}
to {
top: 200px;
} form拼写错误,应该是from!
之所以那三行被划是因为Chrome不支持,具体看下图!
页:
[1]