使用關鍵幀不起作用的簡單動畫

使用關鍵幀的簡單動畫無法正常工作，不知道我做錯了什麼。當我運行它時，我看到的只是一幅靜止的汽車圖像。如果這個問題讓你想facepalm，這個新東西很抱歉。使用關鍵幀不起作用的簡單動畫

CSS

@charset "utf-8"; 
 

 
@-webkit-keyframes drive { 
 
\t from {-webkit-transform: translateX(0px);} 
 
\t to {-webkit-transform: translateX(800px);} 
 
} 
 

 
body { 
 
\t background:#FFF; 
 
} 
 

 
.wrapper { 
 
\t margin: 1em auto; 
 
\t width: 960px; 
 
\t position:relative; 
 
} 
 

 
.drive { 
 
\t position: relative; 
 
\t top:10px; 
 
\t left:10px; 
 
\t webkit-animation-name: drive; 
 
\t webkit-animation-duration: 2s; 
 
\t webkit-animation-timing-function: ease-in; 
 
\t webkit-animation-iteration-count: 1; 
 
} 
 

 
html

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>CSS Using Keyframes</title> 
 
<link rel="stylesheet" type="text/css" href="my-css-1.css"> 
 
</head> 
 

 
<body> 
 
<!--<script src="js/jquery-1.11.2.js"></script> 
 
<script src="js/bootstrap.js"></script> 
 
<script src="js/prefixfree.min.js"></script>--> 
 

 
Animation Keyframe Basics 
 

 
<div class="wrapper"> 
 
\t \t <img src="car.png" alt="car" class="drive"/> 
 
</div> 
 

 
</body> 
 
</html>

來源

2015-04-14 Heisenberg

嘗試更換：

webkit-animation-name: drive; 
webkit-animation-duration: 2s; 
webkit-animation-timing-function: ease-in; 
webkit-animation-iteration-count: 1;

有：

-webkit-animation-name: drive; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: ease-in; 
-webkit-animation-iteration-count: 1;

另外請注意，這將在WebKit瀏覽器運行。你需要瀏覽器特定的CSS來實現跨瀏覽器支持。

來源

2015-04-14 15:57:11

這很棒，現在就開始工作。非常感謝你。 – Heisenberg

使用關鍵幀不起作用的簡單動畫

回答

相關問題