Css: Animation VS. Transition

CSS: Animation vs. Transition

It looks like you've got a handle on how to do them, just not when to do them.

A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

If you want to perform something that does not specifically involve a start state and an end state, or you need more fine-grained control over the keyframes in a transition, then you've got to use an animation.

Difference between css3 transition and jquery animation

The main difference is speed

CSS3 animations run in a separate thread than JavaScript, so its very non-blocking. So CSS3 is best if your application has some load to it.

http://www.phpied.com/css-animations-off-the-ui-thread/

CSS3 animation performance is competitive with JavaScript, but not necessarily superior. This page lets you test multiple browser animation techniques and see the actual differences.

https://greensock.com/js/speed.html

CSS3 animations are also often hardware accelerated (the animation runs on the GPU instead of the CPU boosting performance). But so are many JavaScript animation tools.

CSS animation causes filter transition to break (in chrome)

Turns out is was a bug in chrome. The version in which I was encountering the error was Version 102.0.5005.115, 64-bit.

As misterManSam pointed out, updating seems to solve the issue. After relaunching chrome to finish the update (now using Version 103.0.5060.66) the transition behaves as expected.

I assumed I had the latest version since chrome was not asking me to update, but annoyingly only by going to chrome://settings/help was I able to see that I had to restart chrome to finish updating. For anyone facing this issue, make sure your browser is fully updated by relaunching.

css transiton and css animation cannot be used together

Editted:

Since your player is either shown or hidden, you should only need (in your css) to have a default position (class) and another one for your component state (shown or hidden).

Also, your animation is rather simple, so keyframes animation do not seem to be the solution for me.

Your third solution would seem the more appropriate to me.

If <Draggable> is using the transform property for its animation, and you do not want your transition to mess with it, you should specify that you only want your transition to apply for right property.

<div className={`${showPlayer ? '' : 'hide-player'} player-container `}></div>

.player-container {
    z-index: 999;
    position: absolute;
    bottom: 0;
    right: 0%;
    width: 23rem;
    background: $graph_box_gradient;
    padding: 1rem;
    border-radius: .5rem;
    transition: right .5s ease; // .5s transition only for right property

    &.hide-player {
        right: 100%;
    }
}

---

Related Topics