I can't seem to get the animation timing right on this
http://codepen.io/anon/pen/ZYMgqE
.spinner {
width: 36px;
height: 36px;
background: url('http://i.imgur.com/CYiaWsF.png') top center;
animation: play 1s steps(10) infinite;
}
#keyframes play {
100% { background-position: 0px -2844px; }
}
I have tried numerous combinations, but it always comes out looking like a film reel.
Am I doing something wrong? Did I misunderstand CSS sprite animations?
Your math is off..I think.
The image is, apparently, 2844 px tall...so the number of steps should be the height divided by the element height
2844 / 36 = 79
.spinner {
width: 36px;
height: 36px;
background: url('http://i.imgur.com/CYiaWsF.png') top center;
-webkit-animation: play 1s steps(79) infinite;
animation: play 1s steps(79) infinite;
}
#-webkit-keyframes play {
100% {
background-position: 0px -2844px;
}
}
#keyframes play {
100% {
background-position: 0px -2844px;
}
}
<div class="spinner"></div>
Related
I'm working with css animation with steps...my problem is:
when step() == (frame length -1) everything is fluid exept that I can't see the last frame
when step() == frame length I can't still see the last frame and animation is messy...
I'm looking for a way to use background 100% (or at least an explanation of why it doesn't work), for I can use it with sprites with differents number of frames and just use step() to adjust to the actual sprite..
Demo:
#sprite1, #sprite2, #sprite3 {
height: 41px;
width: 41px;
background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;
}
#sprite1 {
animation: sprite 1s steps(3) infinite;
}
#sprite2 {
animation: sprite 1s steps(4) infinite;
}
#sprite3 {
animation: sprite2 1s steps(4) infinite;
}
#keyframes sprite {
100% { background-position: right center; }
}
#keyframes sprite2 {
100% { background-position: 164px center; }
}
Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>
Required. Percentage of the animation duration.
Legal values:
0-100%
from (same as 0%)
to (same as 100%)
Note: You can have many keyframes-selectors in one animation.
sprit image 4 one start on 50% so i gave. check below sample code.
#sprite1, #sprite2, #sprite3 {
height: 41px;
width: 41px;
background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;
}
#sprite1 {
animation: sprite 1s steps(3) infinite;
}
#sprite2 {
animation: sprite3 1s steps(3) infinite;
}
#sprite3 {
animation: sprite2 1s steps(4) infinite;
}
#keyframes sprite {
60% { background-position: right center; }
}
#keyframes sprite2 {
100% { background-position: 164px center; }
}
#keyframes sprite3 {
50% { background-position: right center; }
}
Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>
You need to change the initial position to be background-position:-33% center; instead of background-position: 0 center;
in this case the four steps will work like this:
step1: background-position: -33% center; which will display img4
step2: background-position: 0% center; which will display img1
step3: background-position: 33% center;which will display img2
step4: background-position: 66% center;which will display img3
#sprite1 {
height: 41px;
width: 41px;
background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') -33% center;
}
#sprite1 {
animation: sprite 1s steps(4) infinite;
}
#keyframes sprite {
100% { background-position: right center; }
}
<div id="sprite1"></div>
Try this:
10 = frames/steps;
For Edge you have to calculate the percentage;
#keyframes sprite{
100%{
background-position: calc(100% / (10 - 1) * 10) 0;
background-position: 111.111% 0;/* Edge/IE */
}
}
#container {
width: 50px;
height: 72px;
animation: container 1s linear infinite;
}
#keyframes container {
50% {
width: 72px;
height: 50px;
}
}
#sprite {
width: 100%;
height: 100%;
background-color: red;
background-image: url(http://i.imgur.com/xtk0SCC.png);
background-position: 0% 0;
background-size: calc(100% * 10) 100%;
background-repeat: no-repeat;
animation: sprite 1s steps(10) infinite;
}
#keyframes sprite {
100% {
background-position: calc(100% / (10 - 1) * 10) 0;
background-position: 111.111% 0;/* Edge/IE */
}
}
<div id="container">
<div id="sprite"></div>
</div>
I have a spritesheet with a dice in it; 6 faces.
its face is 70 x 70 pixels
total sprite image is 70 x 420 pixels
now I want to make a CSS animation that goes from 1 to 6 (that's simple)
additionally I want to change the size; at 50% double it size and at 100% back to normal.
:local(.mydice)
{
width: 70px;
height: 70px;
background: url('/images/dices.png');
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 100% 600%;
animation: dicemove1 5s steps(6, end) infinite;
}
and then use keyframes to make the alterations:
#keyframes dicemove1
{
0% { background-position: 0px 0px;}
100% { background-position: 0px -420px; }
}
the above CSS snippet works.
but now adding the code to make it grows fails:
50% { width: 140px; height: 140px; margin-top: -35px; margin-left: -35px; background-position: 0px ???? }
I know background-position must be changed to support the bigger size but problem is I use steps because I don't want to scroll through the image but see it change from face to face (1,2,3,4,5,6)
dividing 100 by 6 doesn't result in a nice round integer which makes the 50% alteration a bit difficult.
Have been looking for keyframes that could handle steps as well but have not found such a thing.
Anyone knows a way to do this?
I found the solution.
transform: scale(2,2);
This will grow the dice.
Now I can use 2 animations simultaneously; 1 changing the face other resizing
animation: anim1 1s steps(6, end) infinite, anim2 1s steps(36, end) infinite;
#keyframes anim1
{
0% { background-position: 0px 0px; }
100% { background-position: 0px -600px; }
}
#keyframes anim2
{
50% { transform: scale(2,2); }
}
I have a sprite made of 25 frames for a total width of 3427px and a css code like:
http://codepen.io/AlexanderWeb00/pen/aBKVaR
.test {
width: 138px;
height: 224px;
background: url(/img/flame.png) no-repeat;
animation: flame 2s steps(25) infinite;
animation-delay: .5s;
}
#keyframes flame {
100% {
background-position: -3427px 0;
}
}
each frame including 1px space on each side makes its width 138px.
It is it the case that I should add more frames or is there anything that cab be added with CSS?
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/
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.
I've been racking my brain on whether it's possible to have a div show a never-ending "conveyor belt" pattern that always goes in one direction.
You can take a div, tile a background image in one direction with repeat-x, then create a keyframe that moves the background-position by the width of one tile, which will bring the background to the same position where it was at the beginning of the transition.
What I can't figure out is how to "reset" the background-position, so that the cycle can run once again and create the illusion of continuous single-direction motion. Can this be done in CSS?
I could animate a gif and fake it that way, but they are rather large/slow to load & there is always a stutter during the loop.
Thanks!
Found something relevant on a website, after a brief search.
Sprites file:
Fiddle:
http://jsfiddle.net/CGmCe/8676/
Browser support: http://caniuse.com/#feat=css-animation
HTML:
<div class="hi"></div>
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}