How to play specific keyframes with css animation


Tags: css

Problem :

I want to play keyframes 1, 2, 3, 2, 1 with css animation:

This doesn't work:

@keyframes play-specific {
  0% {
    background-position:    0px;
  }
  25% {
    background-position:    -50px;
  }
  50% {
    background-position:    -100px;
  }
  75% {
    background-position:    -50px;
  }
  100% {
    background-position: -0px;
  }
}

with animation:

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");

    animation: play-specific 1s steps(4) infinite;
}

see http://jsfiddle.net/CGmCe/12960/



Solution :

steps() will break animation from a keyframes to another. it can be used to avoid to set each keyframes.

When keyframes are set , 1 will mean jump from a keyframe to another without transition.

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
            animation: play-specific 1s steps(1) infinite;
}
.ho {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
            animation: play 1s steps(10) infinite;
}
@keyframes play-specific {/* steps() will be applied in between each keyframes, 1 is to jump from a keyframe to another without transition */
  0% {
    background-position:    0px;
  }
  25% {
    background-position:    -50px;
  }
  50% {
    background-position:    -100px;
  }
  75% {
    background-position:    -50px;
  }
  100% {
    background-position: -0px;
  }
}

@keyframes play {/* steps here need to be adapted in order to break the linearity of animation */
   from { background-position:    0px; }
     to { background-position: -500px; }
}
<div class="hi"></div>
<div class="ho"></div>

see on W3C

For a keyframed animation, the 'animation-timing-function' applies between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. A 'animation-timing-function' defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.


    CSS Howto..

    how to add css on click and remove it when they click close button [closed]

    CSS how to fill height of container?

    how to show limited text in css [closed]

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to adjust 100% browser height and width with CSS?

    How can I make a visual header in CSS without PHP?

    How to make inline-block with CSS

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to animate text with css font-weight property in jQuery ? normal to bold

    How do I override the default way Wordpress' determines the .current-menu-item class?

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    How to center two columns using CSS?

    How to create a drop down menu like the one in this picture

    How can I get two form fields side-by-side, with each legend above the field?

    How to link my css, js and image file link in django

    How to add a second slideshow on the same webpage

    How to make a slanted css background without transparency overlapping?

    How to override CSS code with a new class?

    How can I fix the menu on the implanted header?

    How to change image css after rotating it in JS?

    How to change from one stylesheet to another with jQuery?

    How to stop shadow effect from moving using pure css?

    How to keep table headers fixed while scrolling down a table

    CSS flex, how to display one item on first line and two on the next line

    How to place a div at top center position of a page using css…?

    How to modify multiple elements of a block with BEM CSS

    how to save the datas which are get from a newsletter? [closed]

    how to stop css/jquery rotation

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    How to create a HTML and CSS “Try it yourself” Editor [closed]