Question

使用关键帧不起作用的简单动画，不确定我做错了什么。当我运行它时，我看到的是一个静止的汽车图像。这个问题很新，如果这个问题让你想要面对这个问题，那么道歉。

的CSS

＆＃13;

@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

＆＃13;

<!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>

＆＃13;

Answer 1

尝试更换：

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才能实现跨浏览器支持。

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

1 个答案: