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.
Related
I am trying to add multiple CSS keyframe animations to a single object. I have an image of a rocket that I want to move right across the screen, and then rotate up to right itself. The first part, moving right, is working fine. The second part, rotating, seems to be working, but instead of rotating in place, it rotates while it moves back to the left.
Here is how it currently looks:
https://codeeverydamnday.com/projects/rocketblaster/index2.html
Relevant HTML:
<img id="rocketfire" src="images/rocketfireright.svg" />
Relevant CSS:
#rocketfire {
position: absolute;
top: 200px;
left: -320px;
height: 200px;
animation:
launch 4s ease-in-out 0.5s 1 forwards,
rightself 2s ease-in-out 4.5s 1 forwards;
}
#keyframes launch {
0% {transform: translateX(-320px);}
100% {transform: translateX(1050px);}
}
#keyframes rightself {
100% {transform: rotate(-90deg);}
}
Every tutorial I have watched has said the same thing—just comma-separate the animations and add the properties you'd like, making sure to add a delay so the second animation doesn't start until after the first. Use "forwards" to keep the object in the ending state of the animation.
I have done all this, but can't figure out why the rotate animation is also moving the object back to the left side instead of just rotating in place. Am I missing something?
It works if you change the animation rightself to this:
#keyframes rightself {
100% {
transform: translateX(1050px) rotate(-90deg);
}
}
I think the animation is not able to retain state but I can't figure why.
In my UI, there's a place for the user to provide input. It may be difficult for some users to release that the UI is even waiting for their input, and so to draw their attention to it, I have a little hint-arrow.
The arrow comes in from the left and bobs from left to right, pointing at the input location.
After the user has provided input at least once, they don't need the animation, and so I remove the .emphasis class from the parent element, and hence the animation.
.options-block .hint-arrow {
height: 145px;
width: 217px; /* width of image */
background-image: url(highlight-arrow.png);
background-position: center;
position: absolute;
opacity: 1;
transition: transform 2s ease-in-out;
transform: translate(-165px,0);
}
.options-block.emphasis .hint-arrow {
animation: options-emphasis 3s ease-in 0s infinite alternate;
}
#keyframes options-emphasis {
0% {transform: translate(-92px,0);}
100% {transform: translate(-62px,0);}
}
Expected behaviour: When the animation is taken off, the arrow slides from its current position back to its default position via the transition property.
Actual behaviour: The arrow snaps back to its default position.
What am I missing here? How do I make the element slide back instead of snap back?
CSS-only solutions are much preferred, although I do have JS available.
Please note: I am not talking about the animation stopping, I am talking about removing it altogether - animation-fill-mode is not the answer.
add the forwards attribute to your animation options
animation: options-emphasis 3s ease-in 0s infinite alternate forwards;
This prevents it from snapping back to the initial starting point
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;
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!
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