I was wondering if images with opacity 0 are getting rendered by your phone/ webbrowser.
I have an app that creates lots of images rapidly and
when I use transition and set my opacity at 0.5 it laggs and when I use opacity 0 it doesn't lagg.
So i'm assuming that the images with opacity 0 aren't rendered at all.
javascript code:
function transitionImage(trans, x, y) { //trans is an image
image.style.transition = "transform 1000ms ease-in, opacity 500ms ease-in 500ms";
image.style.transform="translate("+x+"px, "+y+"px)";
image.style.opacity="0"; //or 0.5
}
Do I need to remove my image with opacity 0 after the transition or isn't it necessary?
Update
See Callback when CSS3 transition finishes for a complete answer
Modern web browsers use the GPU to render parts of web pages, especially ones with animation. I would presume your theory is correct as your GPU would have nothing to render when opacity is set to 0.
I think a better approach to this would be to rather set display:none; on the property when it's not displayed instead of opacity:0.
Related
What can be a reson of performance drop down. The more times hover starts the greater the delay ... after a few hovers on the animation I have to wait a few seconds.
.post_featured_content{
opacity:0;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.header_featured_posts .featured_item_inner:hover .post_featured_content{
opacity:1;
}
Do I make some stupid mistake?
Ps. I must wait even for hover without transition effect
Certain changes can be costly on the browser. Basically the only things that can be changed and transitioned/animated quickly are:
Position (using transform)
Scale
Rotation
Opacity
Your example only uses opacity. This usually does not lead to performance issues. Are there any other properties being changed? Do they need a transition as well? If the answer's no, change your transition to read transition: opacity .3s ease instead.
If you are changing anything else your browser will need to re-paint the screen the whole time, which can cause performance issues.
If a part of your site is changing a lot of properties, it might be useful to include the following css:
translate3d(0,0,0)
This forces the GPU to create a separate layer to take care of all the changes.
For more information I suggest you take a read here
I have one question related to css3 animations, let's day I want to make a fade-in animation, so I animate from opacity: 0 to opacity: 1; so my primary state is opacity 0, and 100% is opacity 1.
So question is, after arriving to 100%; opacity state backs to 0, I want it to appear and stay, so opacity stay at 1 after animation is complete. how can I achieve this?
check my codepen: http://cdpn.io/qjKDlc
Best Regards!
Use animation-fill-mode with a value of forwards:
If the value for 'animation-fill-mode' is 'forwards', then the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed. The last executing keyframe is the ‘to’ or ‘100%’ keyframe, unless the animation has 'animation-direction' set to 'alternate' and both a finite and even iteration count, in which case it is the ‘from’ or ‘0%’ keyframe.
Example: http://jsfiddle.net/FvxVc/2/
I got the answer using this property:
animation-fill-mode: forwards;
It also accepts others parameters like [forwards, backwards, both, none]
I am wondering whether there is already a way through CSS in order to make an element of opacity 0 turns to 1 without any transition time. In other words, I need to make an element which was totally unseen suddenly appears after 4 seconds. No fade-in or out. Just appear with the complete brighteness (opacity).
Use a combination of visibility and opacity:
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
In this demo, hovering over the menu displays only after 0.5s.
http://www.greywyvern.com/?post=337#example5
Simple step-to-end transition:
http://jsfiddle.net/samliew/7EsKK/
Is there a way to set sequence transition delays through pure CSS.
in JS i would use something like a for loop and a counter to stagger the delay value. Can this be done in CSS with the
Also is there a way to set multiple properties on a transition shorthand. The example below shows just top when I try to put others it doesn't work.
Single property
-moz-transition: top 0.3s ease-out 0s;
Multiple properties
-moz-transition: top left bottom 0.3s ease-out 0s;
The second question is less important that the first.
There are two questions here, but for question two, you can use the long hand versions instead:
-moz-transition-property: top, left, bottom;
-moz-transition-duration:0.3s
etc.
For question 1, it's not really clear what you are asking – you have realised you can set delays, so what are you looking to do that can't be solved by just adding a delay?
To be honest, you are extremely likely to have to use JS for anything more complex, as there is usually some logic required that can't be done in CSS.
In my app I'm animating the opacity of elements on the page with something like:
.s {
transition-property: opacity;
transition-duration: 250ms;
}
(with vendor-specific versions, of course). And then
.s.hidden {
opacity: 0;
}
So the animation starts when the hidden class is assigned. Problem is, mouse events are still detected on elements with opacity zero, which I don't want, so I need to either set visibility to hidden or display to none after the transition is finished. I would hope to be able to do something like:
.s {
transition-property: opacity, visibility;
transition-duration: 250ms;
transition-delay: 0, 250ms;
}
and then
.s.hidden {
opacity: 0;
visibility: hidden;
}
to use the CSS transition machinery to do this painlessly. As far as I can tell, that doesn't work because visibility is a non-animatable property. But other transition frameworks such as d3 do handle non-animatable properties, in the obvious way by simply setting the value when the transition starts, or when it ends.
The best I've been able to come up with is to use the transitionend event (and its browser-specific variants such as oTransitionEnd) to catch the end of the transition and set visibility at that point, but I'm wondering if there's any easier way, preferably sticking purely to CSS. Or, as the title of my question implies, are non-animatable properties just that?
visibility is an animatable property, see the spec.
Which means your .hidden class will work as you have described. Demo here: http://jsfiddle.net/ianlunn/xef3s/
Edit: the spec isn't perfectly clear:
visibility: if one of the values is ‘visible’, interpolated as a
discrete step where values of the timing function between 0 and 1 map
to ‘visible’ and other values of the timing function (which occur only
at the start/end of the transition or as a result of ‘cubic-bezier()’
functions with Y values outside of [0, 1]) map to the closer endpoint;
if neither value is ‘visible’ then not interpolable.
But this is what I believe it means:
visibility doesn't smoothly animate between a range of visible and hidden in the way that opacity animates between 1 - 0. It simply switches between visible and hidden at the start and end states of the transition.
Providing the transition is either going to or from visibility, then a transition will occur. If trying to transition between visibility: hidden and visibility: collapse for example, those values are "not interpolable" and the transition would not occur.
So in my example, opacity causes the element to fade out and then at the end of the transition, visibility snaps to hidden.
As a good alternative to display/visibility toggle, opacity:0 with pointer-events:none could be used.