CSS3动画未按预期工作

我无法使此动画为我的生活工作。它应该从一边到另一边移动正方形并更改背景颜色。其他人似乎正在使用EXACT相同的代码并获得期望的结果。我试过不同的支持浏览器，甚至不同的电脑，以确保它不是电脑。任何帮助将不胜感激。CSS3动画未按预期工作

HTML：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS3 Animation</title> 
    <link rel="stylesheet" type="text/css" href="animation.css" /> 
</head> 
<body> 
    <h1>CSS3 Animation</h1> 
    <div class="square"></div> 
</body> 
</html>

CSS：

.square { 
    border: 3px solid black; 
    height: 50px; 
    width: 50px; 
    clear: both; 

    -webkit-animation-name: keyframeMoveDiv; 
    animation-name: keyframeMoveDiv; 

    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ 
    animation-iteration-count: infinite; 

    -webkit-transition-duration: 5s; 
    transition-duration: 5s; 

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
    animation-timing-function: linear; 

    -webkit-animation-direction: alternate; 
    animation-direction: alternate; 

    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 

    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */ 
    animation-play-state: running; 
} 

@keyframes keyframeMoveDiv { 
    0% {background:#FF0000; margin-left: 0;} 
    25% {background:#00FF00; margin-left: 200px;} 
    50% {background:#0000FF; margin-left: 500px;} 
    75% {background:#FFFF00; margin-left: 700px;} 
    100% {background:#00FFFF; margin-left: 0;} 
} 

@-webkit-keyframes keyframeMoveDiv { 
    0% {background:#FF0000; margin-left: 0;} 
    25% {background:#00FF00; margin-left: 200px;} 
    50% {background:#0000FF; margin-left: 500px;} 
    75% {background:#FFFF00; marign-left: 700px;} 
    100% {background:#00FFFF; margin-left: 0;} 
}

来源

2014-10-06 James Walker

那么什么是你的CSS做呢？（即你有什么问题） – JJJ 2014-10-06 09:22:01

@Juhana它将广场的边框从无边框增加到3px边框，甚至没有编程去做！ – 2014-10-06 09:22:46

我在我的CSS使用这样的：

-webkit-transition-duration: 5s; 
transition-duration: 5s;

当它需要动画时长来代替。所以：

-webkit-animation-duration: 5s; 
animation-duration: 5s;

来源

2014-10-06 09:30:36

Demo

.square { 
    border: 3px solid black; 
    height: 50px; 
    width: 50px; 
    clear: both; 


    -webkit-animation: keyframeMoveDiv 5s; /* Chrome, Safari, Opera */ 
    animation: keyframeMoveDiv 5s; 


/* -webkit-animation-name: keyframeMoveDiv; 
    animation-name: keyframeMoveDiv;*/ 

    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ 
    animation-iteration-count: infinite; 

/* -webkit-transition-duration: 5s; 
    transition-duration: 5s;*/ 

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
    animation-timing-function: linear; 

    -webkit-animation-direction: alternate; 
    animation-direction: alternate; 

    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 

    -webkit-animation-play-state: running; /* Chrome, Safari, Opera */ 
    animation-play-state: running; 
} 

@keyframes keyframeMoveDiv { 
    0% {background:#FF0000; margin-left: 0;} 
    25% {background:#00FF00; margin-left: 200px;} 
    50% {background:#0000FF; margin-left: 500px;} 
    75% {background:#FFFF00; margin-left: 700px;} 
    100% {background:#00FFFF; margin-left: 0;} 
} 

@-webkit-keyframes keyframeMoveDiv { 
    0% {background:#FF0000; margin-left: 0;} 
    25% {background:#00FF00; margin-left: 200px;} 
    50% {background:#0000FF; margin-left: 500px;} 
    75% {background:#FFFF00; marign-left: 700px;} 
    100% {background:#00FFFF; margin-left: 0;} 
}

来源

2014-10-06 10:35:05

CSS3动画未按预期工作

回答

相关问题