I am using this demo http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function to create a CSS3 animation. However, my image is of a different size so I have:
<div id="boules"></div>
Then the CSS:
#keyframes boules{
from { background-position: 0px; }
to { background-position: -1067px; }
}
#boules {
background: url(../images/boules.png) 0 0 no-repeat;
width: 133px;
height: 108px;
animation: boules 2s steps(10, end) infinite;
}
I want to reproduce the same effect as the example link above but for some reason in my version the frames slide across instead of giving the animation effect of a still image which morphs into a different shape.
I have tried changing the steps, the seconds and positioning of the background but I still get this slide effect instead of an animation. Is this is calculation issue?
Thanks
Your numbers aren't correct
If you say that you have 10 steps...
animation: boules 2s steps(10, end) infinite;
then the offset ...
to { background-position: -1067px; }
must be a number divisible by 10. But 1067 / 10 = 106.7px means your sprites would be a fractional dimension, and this is not possible.
Review what your sprite dimensions are, and check your math.
Yes, it works Vals. Thanks for your help. As it turns out number of sprites is the same as the keyframe width but I get your point. Cheers!
Related
I am having some trouble animating the x and y position of a mask.
1) The mask is a wave and is of type black on transparent background.
2) Either the x or the y are able to be animated just not working together
Not 100% what I am doing wrong, I have searched Stack Overflow for a resolution but as of yet I havent turned anything up.
The following is the css that is causing issue:
#middle{
display: block;
-webkit-mask-image: url("waveMask3.png");
-webkit-mask-position-x: 100px;
-webkit-mask-position-y: var(--yPos);
animation: waveX 3s linear forwards infinite, waveY 3s linear forwards infinite;
}
#keyframes waveX{
0%{
-webkit-mask-position-x:100px;
}
50%{
-webkit-mask-position-x:-900px;
}
100%{
-webkit-mask-position-x:-900px;
}
}
#keyframes waveY{
0%{
-webkit-mask-position-y: var(--yPos);
}
50%{
-webkit-mask-position-y:calc(var(--yPos) - 10px);
}
100%{
-webkit-mask-position-y:calc(var(--yPos) - 10px);
}
}
Thank you.
For anyone with an issue where they are pretty sure that their code is right but the animation on their mask is not giving the expected results; make sure that
1). The masks is covering the correct part. Black shows,transparency hides.
2). Make sure that your mask is the correct size and orientation to show the animation. My problem was that my wave was on the bottom edge of my mask when it need to be on the top edge.
This resolved the issue for me...I was able to see this by giving the container a background color and by setting width, height and position.
Fiddle A:
I have a gallery of images (there are 4 right now) as shown here in this JSFiddle (lets call as Fiddle A)
in which every single image fades out after 3s second and there is transition delay of 800ms.
I have used JS to make the animation work. In JS, I have used the following constants in my JS.
transitionDuration => is the delay (white flash which we see) which happens on moving from one image to another.
transitionDelay => is the presenation time of an image (meaning the time span for which the image stay at their place).
totalDelay => is only for one image.
Fiddle B:
I also have another gallery of images as shown in this JSFiddle (let's call as Fiddle B) in which a CSS animation is going on.
Presentation time of one image in the fiddle is 3 seconds, and then it moves to another images.
Problem Statement:
I am wondering what changes I need to make in Fiddle B so that it looks like Fiddle A. In Fiddle B there is no transitionDuration. Is there a way we can add a transitionDuration (white flash which we can
see on moving from one image to another)?
In Fiddle B, I have used the following CSS:
a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
position: absolute;
animation: 9s infinite ease-in-out cf4FadeInOut;
opacity: 0;
z-index:1;
}
Adjusting opacity in keyframes to achieve transition duration works, which you have implemented.
Remove opacity: 1 and opacity: 0 so that it becomes
.featured-block a { display: inline-block; }
a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
position: absolute;
animation: 3s infinite ease-in-out cf4FadeInOut;
z-index:1;
}
I’ve got some svg sprites and want to animate them on a website.
What is the recommended way to use these files?
First, this is my Hunter (raw covert) - I got it as eps and converted to svg via indesign.
My entry is to animate it via css by changing the current picture in a keyframes animation.
Ideas:
I found this wonderful blogpost where the current image is selected via anchor
Use background position
So I’ve identified the different images in my file, gave them an ID and hidden the others. You can interconnect with #a #b #c ....
Hunter Image #a
-> Problem: Position on the sprite is still different. I had to change the background position as well.
https://jsfiddle.net/roest/035r0ozq/
0% {
background-image: url(http://elefantenjagdverein.de/server/elephants/hunter/hunter.hidden.svg#a);
}
20% {
background-image: url(http://elefantenjagdverein.de/server/elephants/hunter/hunter.hidden.svg#b);
}
Entry 2 - use background-position like a normal sprite ...
But something still seems broken.
If you use getspritexy.com with a normal sprite you see within "Generated sprite image" the selection. with my svg you see multiple images ...
Same result in my testFiddle:
https://jsfiddle.net/roest/4bbnnm9t/
0% {
background: url('http://elefantenjagdverein.de/server/elephants/hunter/hunter.svg') no-repeat -83px -15px;
width: $width;
height: $height;
}
20% {
background: url('http://elefantenjagdverein.de/server/elephants/hunter/hunter.svg') no-repeat -131px -15px;
width: $width;
height: $height;
}
Which of my ideas is the best and how can i get my hunter to animate correctly?
To have your frames step from one position to anothe without sliding, you can use step-end for the timing function.
animation: hunter-animation 2.5s step-end both infinite;
See: https://jsfiddle.net/4bbnnm9t/3/
Now that it steps, you just have to adjust the positions so they are correct.
Let's say I have a repeating background of pic.png, like so...
body {
background-image: url(pic.png);
}
I want to make it move seamlessly in a certain direction, say northeast at a given speed, infinitely. I've seen w3 schools do it with animate, but that gradually slows and speeds up, not to mention move back and forth.
One more thing, (i think it automatically does this but i'll explain it), when it moves, I don't want to see the emptiness of white space, I want to see the background repeat with it as it moves.
Weave: http://kodeweave.sourceforge.net/editor/#55eb58488c64b5c4ef5b25a64a8c4f3b
Simple! Setup your background and give it an animation property.
body {
background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
background-size: 261px;
animation: moveIt 10s linear infinite;
}
animation: moveIt 10s linear infinite;
I named my keyframe function moveIt.
The delay of the function is 10 seconds.
There are many values you can pass for the animation-timing-function I just set mine to linear so my animation stays steady. Thus doesn't speed up or slow down at the end.
Then in your keyframe function you give it a name and set where and how
Now keyframe functions work by passing to, from or either percents %.
In this case I'm using to and from although 0% and 100% would work perfectly fine as well.
#keyframes moveIt {
from {background-position: bottom left;}
to {background-position: top right;}
}
NOTE: My weave uses Prefix-free that way you don't have to worry about vendor prefix's. However there is also Autoprefixer too which you may want to consider.
body {
background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
background-size: 261px;
animation: moveIt 10s linear infinite;
}
#keyframes moveIt {
from {background-position: bottom left;}
to {background-position: top right;}
}
What you need is basically what you linked. You'll need a pattern image and then make the infinite animation, but move the background as many pixels as the dimentions of the image at keyframe 100%.
If your image is 32x32px and you want it to move up and right:
#keyframes mymove {
100% {background-position: 32px -32px;}
}
You will also want to set the easing to linear to prevent the deceleration:
animation-timing-function: linear;
Asked a similar question to this yesterday, where Zeaklous helped me out with a good answer that worked for animating water moving seamlessly left to right.
so i tried to apply the same thing to a image moving top to bottom seamlessly, thought using the same method would work but i feel like im missing something.
the html is:
<div id="waterfall"></div>
the css is:
#waterfall {
background: url(img/waterfall.png);
background-repeat: no-repeat;
width: 100%;
height: 1200px;
position: absolute;
top: 1150px;
right: 870px;
z-index: 5;
-webkit-transition: flow 3s ease-out;
-moz-transition: flow 3s ease-out;
-o-transition: flow 3s ease-out;
transition: flow 3s ease-out;
animation: flow 2000s linear infinite;
}
#keyframes flow {
100% {background-position: 0 0;}
0% {background-position: 0 100000%;}
}
had some problems when i made the width a set 45px, cant get any animations to work. so i set it to 100% but then it just disappears and i cant find it again.
if i change the animation to horizontal, it works but only with width:100%, the moment i try make it vertical movement is wont work.
what am i missing here that is different for vertical animations?
any help is greatly appreciated.
I believe much of the issue you're having has to do with background-repeat: no-repeat;. The way the animation is set up, it uses repeats to create the flow. When you have no-repeat on, it discontinues the flow due (because it relies on the image repeating). Here is a demo of your code with simply this line taken out and the % in flow fixed (scroll down to see the animation due to your absolute positioning). You can see what it does now, I'm not sure how you want it to look in the end.
There should be no issue changing it from horizontal animation to vertical animation, as seen by this new demo showing both effects separate. All I did was switch the x and y values in the after animation: http://cssdeck.com/labs/mjsrldib If you put background-repeat: no-repeat; back in you can see the problem it creates
EDIT your question prompted me to try and make something that fell like a waterfall but still moved sideways like your water element. Here is what I came up with in the short time I worked on it. It could prove useful somehow