Related
I made an animation to look like fire flies but it keeps flickering when starting a new loop
I used -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden; but they don't work
https://codepen.io/Triciah101/pen/YmKLzb
this is an example of the code on code pen.
I want the animation to be smooth without the weird flickering it does.
Because you start at translate position of 0% and finished in another distance at 100%.
Try to match 0% and 100%, so there will be a "combination" in the animation.
Also, you are going from 0% to 2% and changing a lot of distance. This is too fast, and it's causing the unwanted effect.
I can't find any answers on google, so I'm trying here:
Is there a way for animation-timing-function property to work for an animation as a whole? Because now it is acting on midpoints, rather than on the whole animation. I mean, I have this animation:
Codepen link
and the animation-timing-function property is set to ease-in. But rather than the whole animation easing in, the 0% - 50% part eases separately from 50% - 100% part, and because of it, the animation isn't smooth. Is there a way to do this?
I have apparent gaps in my CSS experience. While I can easily apply and extend what I do know, I'm missing the terms to even search for what I don't know.
So, I've taken parts of Animation.css and applied them, but I don't know how to constrain the bounds of animations like bounceInUp. When the animation happens, the transition seems to have no bounds. I'd like to constrain the bounds of the animation so that it starts and finishes inside its container.
What am I trying to do here? Constrain the bounds, clip the animation, mask it? I've been digging and haven't found what I'm looking for yet.
The best solution I've found is to set the starting position in the CSS's translate3d(). Not sure if that is the "right" way, but it has the right effect for me. I'm not sure what I was expecting to find; however, I don't particularly like this approach because I'll have to tweak the animation CSS based on the size of the container element. I'd prefer to just code the CSS solution once and freely resize containers.
#keyframes bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
/* Set the y length(?) / offset position */
transform: translate3d(0, 300px, 0);
}
}
I have a very tricky issue using fullpage.js, a library that brings you a full-page slider. I want the slider to contain a background image with a title (h1). Moreover, between the background and the title I want to place a transparant image as an overlay, one that doesn’t slide along (with an absolute position).
Even though I I am able to move the title above the overlay by setting the z-index to 2, full page.js adds -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px) to the slidercontainer as soon as you slide, hereby ignoring the z-values and moving he title behind the overlay.
I’ve tried transform-style: flat; (like they propose here: css z-index lost after webkit transform translate3d), but this doesn’t work for me.
Turns out I’m not the only one with this problem (https://stackoverflow.com/questions/27179052/fullpage-js-z-index-lost-after-css3-enabled).
Does anyone have any clue how to fix this?
Thanks!
just add transform: translate3d(0,0,1px); to the elements which are affected.
I tried with text just with: opacity:3;filter:alpha(opacity=300); and it works, but not with images,
any alternative?
If you are trying to make the images darker you cannot do that with opacity higher than 100%. 100% opacity is the most visible, the opacity scale (like in photo/video editing) is from 0 (completely transparent) to 100 (full opacity).
You can however give your image a filter property which will overlay on top of the image. That filter property can do a lot but in this case you would benefit most from the brightness setting of the filter property. 100% brightness will show your image in it's original form, whereas the lower the percent of the brightness the darker the filter will get and thus the darker your image.
It would look something like this:
.slide-img{
width: 100%;
height: 20%;
filter: brightness(50%);
}
Even it it's possible to set opacity values above 100%, there is no benefit to doing so. Once something is 100% opaque it cannot visibly become any more opaque than that.
What is it that you are trying to accomplish by setting the opacity above 100%? There may be some other property that will give you the desired effect.
Image Transparency
I don't think opacity=300 makes any sense; try opacity=30?
Likewise where you are saying opacity=3, you should try opacity=0.3