CODEWITHSUNDEEP
csscss-animationsframe-rate
Walrus
Walrus

Reputation: 20444

CSS Animations alter Frame Rate

Looking at CSS animation to replace animated GIFs in loading wheels.

There is a basic example here http://jsfiddle.net/kFmY8/448/

#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(360deg);}
}

I want to alter the frame rate so that there are only 12 frames per cycle. This would take out the fluidity of the animation more closely matching the animated GIF it replaces.

Can this be done?

Upvotes: 14

Views: 14605

Answers (2)

Trolleymusic
Trolleymusic

Reputation: 2277

You want to use steps() for the easing function instead of linear.

http://jsfiddle.net/trolleymusic/uTd3x/

I've changed your animation value from:

-webkit-animation: rotation 2s infinite linear;

to:

-webkit-animation: rotation 2s infinite steps(12);

Where the number inside the steps function is how many frames it will divide the animation into.

Bit of reference: http://css-tricks.com/snippets/css/keyframe-animation-syntax/ - about halfway down there's a section called Steps()

Upvotes: 30

Walrus
Walrus

Reputation: 20444

Alter the animation to a fading one, then use the CSS transform rotation attribute to fix each block at 30 degree intervals. Apply the animation to each one but delayed by .1s.

.wheel {
    position:absolute; display:none;
}
.wheel li {
    width:4px; height:11px; position:absolute; -webkit-transform-origin:3px 21px; background:#222; border-radius:4px; list-style:none; display:block; opacity:.25; box-shadow:0 0 1px rgba(255,255,255,0.9);
}
.wheel li:nth-child(1) { -webkit-transform:rotate(30deg); -webkit-animation:fadeshift 1.2s infinite linear 0s; }
.wheel li:nth-child(2) { -webkit-transform:rotate(60deg); -webkit-animation:fadeshift 1.2s infinite linear 0.1s; }
.wheel li:nth-child(3) { -webkit-transform:rotate(90deg); -webkit-animation:fadeshift 1.2s infinite linear 0.2s; }
.wheel li:nth-child(4) { -webkit-transform:rotate(120deg); -webkit-animation:fadeshift 1.2s infinite linear 0.3s; }
.wheel li:nth-child(5) { -webkit-transform:rotate(150deg); -webkit-animation:fadeshift 1.2s infinite linear 0.4s; }
.wheel li:nth-child(6) { -webkit-transform:rotate(180deg); -webkit-animation:fadeshift 1.2s infinite linear 0.5s; }
.wheel li:nth-child(7) { -webkit-transform:rotate(210deg); -webkit-animation:fadeshift 1.2s infinite linear 0.6s; }
.wheel li:nth-child(8) { -webkit-transform:rotate(240deg); -webkit-animation:fadeshift 1.2s infinite linear 0.7s; }
.wheel li:nth-child(9) { -webkit-transform:rotate(270deg); -webkit-animation:fadeshift 1.2s infinite linear 0.8s; }
.wheel li:nth-child(10) { -webkit-transform:rotate(300deg); -webkit-animation:fadeshift 1.2s infinite linear 0.9s; }
.wheel li:nth-child(11) { -webkit-transform:rotate(330deg); -webkit-animation:fadeshift 1.2s infinite linear 1s; }
.wheel li:nth-child(12) { -webkit-transform:rotate(360deg); -webkit-animation:fadeshift 1.2s infinite linear 1.1s; }
@-webkit-keyframes fadeshift { 
    from { opacity:1; } to { opacity:.1; }
}

<div class="appload wheel"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></div>

QED.

Upvotes: 0

Related Questions