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;
Related
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.
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 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); }
}
Im new to css animation, so I got this sequence movements picture online and want to make it walks. I follow a tutorial but it doesn't work in this case. I'm trying to make it moves. I don't know how to properly do that so I start with the first row of image. Its dimensions are 832x228.
and this is CSS code:
.sprite {
width: 130px;
height: 130px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
}
#keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: 832px 0px;
}
}
<div class="sprite"></div>
You are on the right path but the background-position is wrong within the keyframes. Sprite images should move from the right to the left in order to produce a moving animation and so the background position should go from 0 0 to -832px 0.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/* image size is 832x228, so height is set as half of it */
}
#keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: -832px 0px;
}
}
<div class='sprite'></div>
As mentioned in Robert C's answer, this will still not get the second row of images to show up. This is because the Y part of background-position doesn't change within the keyframes. The below snippet kindly contributed by Mishko Vladimir is one way to get them to display but problem is that if the no. of steps is increased to 16 (so as to show all sprites) then the animation doesn't work properly anymore.
Also, there will be a blink at the point where Y position changes. So, my recommendation would be to put all 16 sprites in the same row instead of two.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/*832x228*/
}
#keyframes walker {
0% {
background-position: 0 0;
}
50% {
background-position: -832px 0px;
}
51% {
background-position: 0 -114px;
}
100% {
background-position: -832px -114px;
}
}
<div class='sprite'></div>
Looks like you have the wrong background-position, it should be -832px rather than 832px. Note that with the above image you're also only going to get the top 8 frames, you'll need to edit the file to get the bottom 8 for a longer transition.
You may also want to adjust the time in your animation down to a fraction (I had a smoother walk with 0.9), and you'll want to shrink your width and height down to around 115px to avoid seeing some of the other frames.
I'm trying to achieve a small animated intro to a website. Basically I want a centralised image to crop equally from top and bottom and then move up to the top of the screen.
So far I have the following: http://dk8.co/animation.html
This is using the following CSS:
#pic {
position:absolute;
top:0%;
width: 100%;
height: 200px;
left: 0px;
background:url(web/images/AM-title.jpg) no-repeat;
-moz-background-size:100% auto;
-webkit-background-size:100% auto;
-webkit-background-position:0% auto;
background-size:100% auto;
-o-background-size: 100% auto;
-webkit-animation-name: move;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
#-webkit-keyframes move {
0% {
top: 50%;
height: 400px;
}
50% {
top: 50%;
height: 300px;
}
}
However, the problem is that the "cropping" is occurring from just the bottom up rather than from top and bottom.
Is there any way of achieving an equal cropping effect on the top and the bottom?
The very simple solution is to assign 50% to the background-position property, or simply add 50% to the shorthand you have above:
background: url(web/images/AM-title.jpg) 50% 50% no-repeat;
Here is a working example: http://jsfiddle.net/sl1dr/L3sQW/
I wrote this five years ago for Prototype.js. You can scoop the code and see how it works.
Basically you move the position and background position of the element at the same time.