css3动画播放
@keyframes move {
0%{
transform: translate(0);
}
15%{
transform: translate(100px,180px);
}
30%{
transform: translate(150px,0);
}
45%{
transform: translate(250px,180px);
}
60%{
transform:translate(300px,0);
}
75%{
transform: translate(450px,180px);
}
100%{
transfrom: translate(480px,0);
}
}
div {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: green;
border-radius: 100%;
animation-name:move;
animation-duration: 10s;
animation-timing-function:ease;
animation-delay:2s;
animation-iteration-count:infinite;
}
@-webkit-keyframes move {
0%{
transform: translate(0);
}
15%{
transform: translate(100px,180px);
}
30%{
transform: translate(150px,0);
}
45%{
transform: translate(250px,180px);
}
60%{
transform:translate(300px,0);
}
75%{
transform: translate(450px,180px);
}
100%{
transfrom: translate(480px,0);
}
}
div span {
-webkit-animation-name:move;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
}
@-moz-keyframes move {
0%{
transform: translate(0);
}
15%{
transform: translate(100px,180px);
}
30%{
transform: translate(150px,0);
}
45%{
transform: translate(250px,180px);
}
60%{
transform:translate(300px,0);
}
75%{
transform: translate(450px,180px);
}
100%{
transfrom: translate(480px,0);
}
}
div span {
-moz-animation-name:move;
-moz-animation-duration: 10s;
-moz-animation-timing-function:ease;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
}
着到底哪里出错了，IE9和360下小圆球不能动！
html代码为
<div><span></span></div>
坚强的波波3回答
-
echo_kinchao
IE9不兼容CSS3动画的 -
奔跑的Q丶
IE9 以及更早的版本不支持 animation 属性。 -
迷途的马尔斯
你的代码没错，keyframes目前在IE的兼容性很差，我IE11都没法跑动很多关键帧动画，IE只能单纯跑那些背景色啊、width、height啊那些简单的动画。360也是IE内核的，所以360也存在兼容性问题
随时随地看视频慕课网APP
相关分类
CSS3