老师看看这代码有问题？
来源：2-25 animation-play-state
web_東
2017-03-13 04:03:18
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text</title>
<style type="text/css">
div{
position: absolute;
width:30px;
height:30px;
left:0;
right:0;
bottom:200px;
margin:auto;
font-family:"microsofte Yahei";
font-size:32px;
text-align:center;
font-weight:bolder;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:bot;
animation:bot;
-webkit-animation-duration:2s;
animation-duration:2s;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
-ebkit-animation-delay:1s;
animation-delay:1s;
-webkit-animation-direction:normal;
animation-direction:normal;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
-webkit-@keyframes bot{
from {transform:translateY(0px);
/* transform:translate(90deg);*/
}
to {transform:translateY(60px);
/* transform:translate(90deg);*/
}
}
@keyframes bot{
from {transform:translateY(0px);
/* transform:translate(90deg);*/
}
to {transform:translateY(60px);
/* transform:translate(90deg);*/
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
3回答
-
web_東
提问者
2017-03-15
谢谢，搞定啦。
0 -
怎么都被占用了呢
2017-03-13
1、定义动画延迟时书写错误，
，应为-webkit-2、定义兼容safari和chrome的动画时书写错误，
，应为@-webkit-keyframes3、你的代码中只设置了兼容safari和chrome，最好加上-moz-兼容火狐，-o-兼容opera
4、html代码要规范排版，缩进2个字符
5、建议调整剪头方向，使剪头朝下并运动
0 -
残扬x0
2017-03-13
1.-ebkit-animation-delay:1s;，应该是-webkit-animation-delay:1s;
2.-webkit-@keyframes bot错了，应该是@-webkit-keyframes bot
0
相似问题