I have this small code working good:
#image {
height: 32px;
width: 32px;
background: url('./media/man.png') 32px 0px;
animation: autoRotate 1s steps(4) infinite;
transform: scale(5);
image-rendering: pixelated;
}
and this for the animation
#keyframes autoRotate {
0% {
background-position: 32px 0px;
}
100% {
background-position: 32px 128px;
}
}
The think is, cause the sprite was made how was made, what i see is:
The sprite looking to left->right->back->front
I want rotation like left->front->right->back
im trying to put a 50% step but fails
i can't find the way to declare step-by-step my this-4-steps
i need to declare something like:
step1: background-position: 32px 0px;
step2: background-position: 32px 64px;
step3: background-position: 32px 96px;
step4: background-position: 32px 32px;
All what i try, fails XD. My brain logic was to put kayframes on 0% 25% 50% 75% and 100% with this rules, but fail.
any idea how to make this without changing the sprite png? thanks.
Related
I want to make an image do the following:
Start as a static image
Cycle through multiple frames when hovering
Return to the static image when no longer hovering
Image frames I was working with:
https://i.imgur.com/6z28Xcz.png
https://i.imgur.com/A0d4DL0.png
https://i.imgur.com/1QOJG9w.png
https://i.imgur.com/zwjr693.png
I tried this but could not get it to work (it just displayed nothing, even when copying and pasting the jsfiddle example linked to on that page).
Also is there a way of putting this in an img tag rather than a div one?
Pure CSS solution
#keyframes zigzag{
0%{
background-image: url('https://i.imgur.com/6z28Xcz.png');
}
25%{
background-image: url('https://i.imgur.com/A0d4DL0.png');
}
50%{
background-image: url('https://i.imgur.com/1QOJG9w.png');
}
100%{
background-image: url('https://i.imgur.com/zwjr693.png');
}
}
#logo{
width: 400px;
height: 170px;
border: 5px solid;
border-radius: 20%;
background-image: url('https://i.imgur.com/6z28Xcz.png');
background-repeat: no-repeat;
background-size: cover;
}
#logo:hover{
animation: zigzag 2000ms ease-in infinite;
}
<div id="logo"></div>
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
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); }
}
trying to follow the blog post treehouse tutorial and coded everything pretty much like the tutorial said but my animation wont start or work. My little image shows up fine and its a 490 x 110 sprite sheet. The code im using is the following:
.ken {
width: 70px;
height: 110px;
background: url('/imgs/ken-shoryuken.png') left center;
animation: play 1.5s steps(7) infinite;
}
#keyframes play {
100% { background-position:-490; }
}
And it is positioned by a simple dive which is showing up fine, its just the animation wont work for some reason, any thoughts?
You need to specify an absolute length unit, keyword or percentage for background-position:
#keyframes play {
100% { background-position:-490px; }
}
[Background position] Syntax
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;
I have the following fiddle (Wekbit/Chrome only).
Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone?
HTML
<div class="tile10"></div>
CSS
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 80px;
}
}
.tile10 {
width: 80px;
height: 80px;
position: absolute;
background: url(http://www.mauricederegt.nl/loopband.svg);
background-repeat: repeat-y;
-webkit-animation: move 3s linear infinite;
z-index: -1;
}
It was indeed in the image. Your rows are about 6px heigh. 80 is not dividable by 6, so there will be a little displacement. 78 however is dividable by 6.
http://jsfiddle.net/rtS5U/5/
So instead of moving it 80px down, move it 78px down.
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 78px;
}
}