CSS3動畫無法正常工作
[英]CSS3 Animation Not Working as Expected
問題描述
我無法讓此動畫在我的生活中發揮作用。 應該將正方形從一側移到另一側並更改背景顏色。 其他人似乎正在使用完全相同的代碼並獲得期望的結果。 我嘗試了不同的受支持的瀏覽器，甚至嘗試了不同的計算機，以確保它不是該計算機。 任何幫助將不勝感激。
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;}
}
2 個解決方案
解決方案1
0 已采納 2014-10-06 09:30:36
我在CSS中使用了這個：
-webkit-transition-duration: 5s;
transition-duration: 5s;
當需要動畫持續時間時。 所以：
-webkit-animation-duration: 5s;
animation-duration: 5s;
解決方案2
0 2014-10-06 10:35:05
.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;}
}
切換類無法正常使用CSS3動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.