I am creating a sprite animation of a treasure chest opening. I have made 7 stages placed next to each other on a single "png" format image. It works fine with the following code but for some reason at the beginning of the animation the image jumps up. I thought it was a problem with the image and that the first stage may have been a little lower than the others. This was not the case, so I am left not knowing what the problem is. Can anyone enlighten me to what the problem is?
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -3600px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -3600px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -3600px; }
}
.chest {
background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png");
height: 600px;
margin: 0 auto;
width: 550px;
}
.chest:hover {
-webkit-animation: wink 2.5s steps(6, end) 1 forwards;
-moz-animation: wink 2.5s steps(6, end) 1 forwards;
animation: wink 2.5s steps(6, end) 1 forwards;
}
it is because you have not set an initial background position so when the animation starts the background images is jumping up.
.chest {
background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png");
background-position: 0 0;
height: 600px;
margin: 0 auto;
width: 550px;
}
This should fix it
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 animated sprites with css steps and when tested on Firefox and Explorer11 i understand that it do not behave like Chrome.
I have the animattion like the below
#keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
My sprites are vertical. And i have teh animation like this on the elements
-webkit-animation: sprite 3.5s steps(60) infinite; // the frame count is minus - from original frame count
-moz-animation: sprite 3.5s steps(60) infinite;
-ms-animation: sprite 3.5s steps(60) infinite;
-o-animation: sprite 3.5s steps(60) infinite;
animation: sprite 3.5s steps(60) infinite;
background: url(images/sprites/solutions/solution_2_61square_450-min.png) no-repeat 0 0% !important;
background-size: 100% !important;
So all are shaking In Explorer and do not play in Firefox.
Any idea why?
See working demo https://jsfiddle.net/anahitdev/02kmpr6u/
Thanks
Change your keyframe css code to this , so it will support all
browser.
#keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
#-webkit-keyframes sprite {/* Chrome and Safari*/
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
#-moz-keyframes sprite { /* Mozilla Firefox */
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
#-ms-keyframes sprite { /*Internet Explorer*/
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
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 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>
I'm making a CSS3-animation of a desk with a blinking lamp using a spritesheet with only two different sprites. The problem is, that the animation when using percent instead from "from" and "to" causes the entire image to blink, even though the animation runs as it should.
It works fine when I use this:
background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;
#-webkit-keyframes {
from {
background-position: 0 0;
}
to {
background-position: 0 200%;
}
}
But when using this, the image blinks. The animaton itself works as it should though:
#-webkit-keyframes desk {
0% {
background-position: 0 0%;
}
10% {
background-position: 0 200%;
}
15% {
background-position: 0 0%;
}
20% {
background-position: 0 200%;
}
25% {
background-position: 0 0%;
}
100% {
background-position: 0 200%;
}
}
I am clueless to why this happens, as I'm using a spritesheet, and the image wont have to load every time.
Hope someone can help me out :)
try:
background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;
#-webkit-keyframes desk{
from {
background-position: 0 0;
}
to {
background-position: 0 200%;
}
}