for some reason are the image gone when the animation is finished? :/
.coin {
width: 200px;
height: 200px;
background-size: cover;
animation: CoinflipRoll 6s steps(199);
animation-delay: .5s;
animation-fill-mode: forwards;
background-repeat: no-repeat;
background-image: url("https://i.imgur.com/Mvek2Uy.png");
}
#keyframes CoinflipRoll {
100% {
background-position-y: -39800px;
}
}
<small>Image is 248x12648</small>
<div class="coin"></div>
Correct your code like below. You don't need a lot of complex value and you need to set the correct value to steps(). Your image contains 50 frames not 199
.coin {
width: 200px;
height: 200px;
animation: CoinflipRoll 2s steps(50) .5s forwards;
background-image: url("https://i.imgur.com/Mvek2Uy.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
#keyframes CoinflipRoll {
100% {
background-position: bottom;
}
}
<div class="coin"></div>
The animation is moving the picture out of the frame. Look at the picture - its still there afterwards, just moved through all the "animation frames". So stop it before it is at the end but manipulating the end value
Related
I'm using this code to make a wordpress header picture slowly zoom in and out. It works in Chrome and Firefox, but in Safari it seems like the background-size: cover that is set for the picture overrides the zoom. Is there a way to zoom from cover to "150% cover"? Basically tell it to start as cover and then go 150% from there? This code wont even zoom at all in Safari, and background-size: 100% doesn't make the picture tall enough on mobile so I'd need a different solution.
Thank you!
#-webkit-keyframes animatedBackground {
from {
background-size: 100%;}
50% {
background-size: 150%; }
to {
background-size: 100%; }
}
.home .header-media .wrapper:before {
-webkit-animation: animatedBackground 90s linear infinite;
-moz-animation: animatedBackground 90s linear infinite;
animation: animatedBackground 90s linear infinite;
background-position: center;
background-size: cover;
}
Here is working snippet, transition and background-size do the trick.
.parent {
width: 400px;
height: 300px;
}
.child {
transition: all .5s;
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg");
background-position: center;
background-size: 100%;
}
.parent:hover .child,
.parent:focus .child {
background-size: 150%;
}
<div class="parent">
<div class="child"></div>
</div>
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>
The following image is to be used in a keyframes animation by moving the background-image position 100% to the right on each frame:
The idea is that the ArrowsAnim.png has 7 frames of the same image (the set of 3 chevrons pointing to the right) in different animation states. The animation arrowAnimation (CSS below) simply skips through background-position 0% to 300% to show the first three frames of this image over 0.5 seconds, repeatedly.
What's happening is that when I resize the browser window, I can sometimes see some pixels of the next or previous frame of the animation, instead of having the background perfectly centered around whichever should be the current block, as you can see in the next picture:
So for some reason, background-position is not being calculated correctly.
I also cannot reproduce this issue on Chromium, but I can do so on Chrome, Firefox and Edge.
CSS:
#autoplay-arrow {
display: inline-block;
position: absolute;
width: 5.91549%;
top: 22.05882%;
height: 50.74627%;
margin-left: 18.30986%;
background-size: 100% 100%;
background-position: 0 0;
background-image: url(../graphics/Arrows_002.png);
}
#-moz-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#-webkit-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#autoplay-arrow.anim {
background-image: url(../graphics/ArrowsAnim.png);
background-size: 700% 100%;
-moz-animation: arrowAnimation 0.5s steps(3) infinite;
-webkit-animation: arrowAnimation 0.5s steps(3) infinite;
animation: arrowAnimation 0.5s steps(3) infinite;
}
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>