使用关键帧的简单动画不起作用

Question

Simple animation using keyframes not working, not sure what I've done wrong. 使用关键帧的简单动画无法正常工作，不确定我做错了什么。 When I run it all I see is a still car image. 当我运行它时，我看到的只是静止的汽车图像。 New to this stuff so apologies if this question makes you want to facepalm. 这些东西的新手，如果这个问题让您想面对手掌，则深表歉意。

css 的CSS

 @charset "utf-8"; @-webkit-keyframes drive { from {-webkit-transform: translateX(0px);} to {-webkit-transform: translateX(800px);} } body { background:#FFF; } .wrapper { margin: 1em auto; width: 960px; position:relative; } .drive { position: relative; top:10px; left:10px; webkit-animation-name: drive; webkit-animation-duration: 2s; webkit-animation-timing-function: ease-in; 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"> <img src="car.png" alt="car" class="drive"/> </div> </body> </html>

Answer 1

Try replacing: 尝试更换：

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

with: 与：

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

Also note that this will work in webkit browsers. 另请注意，这将在webkit浏览器中起作用。 You'll need browser specific css achieve cross browser support. 您将需要特定于浏览器的CSS来实现跨浏览器支持。

使用关键帧的简单动画不起作用

问题描述

1 个解决方案

解决方案1
0 2015-04-14 15:57:11

使用关键帧的简单动画不起作用

问题描述

1 个解决方案

解决方案1 0 2015-04-14 15:57:11

解决方案1
0 2015-04-14 15:57:11