I would like to animate sidebar with CSS transition
.site-config
flex: 0 1 0
overflow: hidden
transform: translateX(100%)
transition: all .4s ease-in
&.active
flex: 2 1 40%
transform: translateX(0)
It works well, but because flex is also under transition, it slows down appearance and causes other performance issues.
Eventually, I tried transition: transform .5s ease but it's not working.
Update
Currently transition: transform works, but quite unepected from time to time.
Short video reference
http://screencast-o-matic.com/watch/cDlDYKQZCY
As discussed in the comments you should try to avoid using transition: all as it can slow down performance. Try to be as specific as possible with your transitions.
Also, move your transition from 2D to 3D by using translate3d(x,y,z) instead of translateX(x) to make use of hardware acceleration when enabled/available.
Related
This question already has answers here:
CSS transform vs position
(4 answers)
Closed 2 years ago.
I recently got asked which of these snippets was more performant in a code test for a job. Which is correct and why?
/* Option 1 */
.nav {
left: -250px;
transition: left 300ms linear;
}
.nav--open {
left: 0px;
transition: left 300ms linear;
}
/* Option 2 */
.nav {
transform: translateX(-250px);
transition: transform 300ms linear;
}
.nav--open {
transform: none;
transition: transform 300ms linear;
}
It has to do with frame rates. Animating the left property triggers layout which might lead to skipped frames. Transforms are better to animate because they do not trigger layout or paints and can be hardware accelerated.
To achieve a silky smooth 60fps in your CSS animations, you want to limit, as much as you can, your animations to the properties opacity, translate, rotate and scale. You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames.
Have a look at this article by Paul Lewis and Paul Irish, written in 2013 but relevant to date - https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
This HTML element had a nice transition effect when it was clicked. However when I added another class with animation property, transition was lost. Look at the demo: http://codepen.io/kunokdev/pen/rewveJ
<div
class="main-menu-item zoom-in-entrance">
Test
</div>
Do animation and transition properties not stack?
#keyframes zoom-in-entrance
from
opacity: 0
-webkit-transform: scale3d(.3, .3, .3)
transform: scale3d(.3, .3, .3)
50%
opacity: 1
.zoom-in-entrance
-webkit-animation: zoom-in-entrance .25s forwards
animation: zoom-in-entrance .25s forwards
.main-menu-item
cursor: pointer
background: $white
transition: all .25s
&:active
+scale(0.95,0.95)
i, span
display: block
Animation from animation property only happens on page load and never again, however animation from transition happens only when an element is clicked.
How do I make them both work?
Both your animation and transition properties are trying to affect scale. This is because you have specified forwards as the animation fill mode.
Since your animation ends on the "default" state of the item, you can use none instead, and the animation will not hold the scale at 1.0, allowing the transition to take effect:
-webkit-animation: zoom-in-entrance .25s none
animation: zoom-in-entrance .25s none
(you can also just leave out none as it's the default fill mode)
Updated pen: http://codepen.io/anon/pen/XdgqNq
If you remove the forwards which persits the final state of the animation it works fine.
If you can use js, you could remove zoom-in-entrance class after animation is finished.
Callback when CSS3 transition finishes
I was initially using jQuery's slide functions to slide a page out of view (to reveal another page beneath it) in a Cordova app I'm making, and whilst this worked perfect on my desktop browser, it (now understandably) was quite choppy on the actual mobile device. So I found out the reason for this and learnt that I should use CSS3 animations/transitions for mobile devices, and more specifically Translate3d for anything that may require GPU rendering. So I've made those changes like this:
#mainpage{
z-index: 10;
top: 0;
-webkit-transition: all .5s linear;
transition: all .5s linear;
border-bottom: 1px solid #111111;
}
#mainpage.out{
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
and I just toggle the 'out' class as necessary.
The transition runs smoothly until about 50px are left on the screen (or the page has about 50px left to reappear), then it stops for about a second before finishing up. I was wondering if anyone has any suggestion as to why this may be the case or if there's maybe an even more efficient way of doing this.
The device I am using has a nVIDIA Tegra 3 CPU with 12-Core High Performance Graphics.
I think this is not the way you should do the animation.
Try the following:
#mainpage {
z-index: 10;
top: 0;
border-bottom: 1px solid #111111;
-webkit-transition: -webkit-transform .5s linear;
transition: transform .5s linear;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#mainpage.out {
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
First change is, specify the type of the property you want to animate (the transition parameter), not sure what you are animating when you write all.
Second thing, specify the "back" transition with translate3d(0,0,0). Also not sure, if it makes a difference here, though. I hope this helps you.
I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition:
In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.
Any ideas on what causes this and how to avoid it?
http://jsfiddle.net/tTa5r/
.rotate{
background: green;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate.flip{
-moz-transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
}
the flip class is added/removed using jquery:
$('.rotate').on('click', function(){
$(this).toggleClass('flip');
});
-webkit-backface-visibility: hidden;
also worked for me... adding it to the elements I have transform on
p.s. I would vote the previous answer up but I cant as I dont have enough "reputation", nor can I see how to comment on it
adding
-webkit-backface-visibility: hidden;
to all affected elements, seems to help with that issue: http://jsfiddle.net/tTa5r/2/
while i'm not sure what this property excatly does
it seems to do something to the font rendering:
http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/
...not sure if i dislike that, though.
found here: iPhone WebKit CSS animations cause flicker
The backface-visibility property determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element.
In this case, it seems that it has the same effect as when you add:
-webkit-transform: translate3d(0,0,0);
Demo - http://jsfiddle.net/tTa5r/4/
which forces hardware acceleration giving you a slightly thinner (anti-aliased), but a more consistent font rendering before and after the transition.
There is a third option as well, and that is to add:
-webkit-font-smoothing: antialiased;
Demo - http://jsfiddle.net/tTa5r/3/
I answered a similar question before and #mddw posted a comment linking to a blog post that describes the methods of antialiasing which seems to be the reason for why you see a differens during and after the transition.
http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/
Hope that helps!
Simple enough question:
Is it possible to leverage css transitions when it would would not be appropriate/feasible to trigger animations via pseudo selectors (ie :hover, :active, etc)?
My use case is I want something to animate after form submission. I was thinking I would be able to do something like:
.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }
Then using javascript, I would add the shown class to this element I want to animate.
Why not just use jQuery or similar to animate? I'm glad you asked. The CSS Transitions are much smoother on the iPhone and other mobile devices, which are the platforms I'm targeting. Currently I'm doing animations with jQuery, but they're just not as smooth as they could be.
Edited to clarify what I was asking about pseudo-selectors.
Everything should work as you expect. JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/
.success_message {
opacity: 0.0;
transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
}
.success_message.shown {
opacity: 1.0;
}
If this does not solve your issue, please include further code samples or browser specifics. Good luck!
Yes, you can do that. Css transitions work any time a css property changes, even if it was because the class changed.