css - Simple animation using keyframes not working -


simple animation using keyframes not working, not sure i've done wrong. when run see still car image. new stuff apologies if question makes want facepalm.

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>

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 work in webkit browsers. you'll need browser specific css achieve cross browser support.


Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -