Search code examples
cssreactjsemotion

React-Emotion - Animating a div with EmotionJS

I need some help with animating my div. I am using Emotion-JS for React.

I dont think the animation is working. Below is my component.

Edit jl857l6vo3

Thanks

Solution

  • Bear in mind the tips of the @Powell_v2 answer above, it is right!

    However for your case you don't even need to use animation and keyframes. Just use transition.

    transition-duration: 10s;

    transition-property: width;

            <div
          className={css`
            position: absolute;
            left: 0;
            top: 10vh;
            width: ${this.state.open ? "80vw" : "10vw"};
            height: 8vh;
            background-color: black;
            z-index: 999;
            border-radius: 0px 10px 10px 0px;
            transition-duration: 10s;
            transition-property: width;
          `}
        />
    ```