Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop Motion Animation CSS

I am creating a stop-motion animation of a running cat. I have already all the slides ready. But it doesn't seem to work properly:

div {
  animation: run 1s steps(10) infinite;
  -webkit-animation: run 1s steps(10) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; 
  background-repeat: no-repeat;
  height: 200px;
  width: 400px;
}

@keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}
@-webkit-keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}
<div></div>
like image 346
timbaktu Avatar asked Jan 08 '15 07:01

timbaktu


People also ask

How do you make an animation stop motion in CSS?

The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element.

Can you animate with CSS?

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.


1 Answers

Actually you have 13 slides. So put steps(13)

div {
  animation: run 1s steps(13) infinite;
  -webkit-animation: run 1s steps(13) infinite;
  background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; 
  background-repeat: no-repeat;
  height: 200px;
  width: 400px;
}

@keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}
@-webkit-keyframes run {  
  0% {background-position: 100% 0; } 
  100% {background-position: 100% -2591px; }
}
<div></div>
like image 149
The Pragmatick Avatar answered Sep 30 '22 13:09

The Pragmatick