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動畫未按預期工作

回答

相關問題