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
Related
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.
I have a CSS-animated background position.
body {
background: linear-gradient(320deg, #000, #3ff);
background-size: 10000% !important;
animation: AnimationName 1s linear infinite;
}
#keyframes AnimationName {
0%{background-position:top left}
50%{background-position:bottom right}
100%{background-position:top left}
}
I have a range slider set up for the user to change the speed, by setting the animation-duration style property. The trouble is, the animation jerks to different parts of the animation as this property is changed. That is, if the animation-duration is 0.1s and it is changed to 5s over the course of a second or so, the background position is seemingly randomly popped around. You can see this for yourself in the fiddle:
https://jsfiddle.net/x97adpe6/2/
I suspect this is happening as the browser is using some sort of time-based calculation to determine where the animation should be for the given animation duration, rather than offsetting the time based on where it is. That is, if the animation duration is changed from a long time, to a short time, and back to a long time, the effect is as if the animation was never changed from the long time.
What I would like to happen is the natural result of changing the speed of something. I don't need any tweening between speeds, but I do want the animation to continue on at the new speed from wherever it is at this moment.
Is this possible, short of re-implementing the whole animation in JavaScript?
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/
this is my css to do animation.
transform: scale(0) rotateY(180deg);
I have to give separate transition-timing-function for scale and rotate. But as per my research, i am able to give like below only, which actually gives same easing function for scale and rotate.
transition: transform .7s ease-in-out;
Any one knows to give separate timing function for scale and rotate.
you can crate multiple animations, the first one would scale and the second would rotate, and assign different easing duration to each of them. multiple animations can then be assigned to a single element.
see this guide http://css-tricks.com/snippets/css/keyframe-animation-syntax/ on how to implement this
quote from the link:
Multiple animations -
You can comma-separate the values to declare multiple animations on a selector.
.animate-this {
animation:
first-animation 2s infinite,
another-animation 1s;
}
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.