Styled Components + React: CSS transition keeps resetting

Question

I have a styled component:

import styled, { keyframes } from 'styled-components';

const slideToCorner = keyframes`
  from {
    right: 0;
    top: 0;
  }

  to {
    right: 300px;
    top: 50px;
  }
`;

const SlideToCorner = styled.div`
  position: relative;
  right: 0;
  top: 0;
  ${props => props.slide && `animation: ${slideToCorner} 0.5s linear;`}
  transition: all 1s linear;
`;

export default SlideToCorner;

This is how it's being used:

<SlideToCorner slide={matchingStatus === MATCHING_STATES.CONFIRMING}>
  <TargetBox>
    <LocalVideo />
  </TargetBox>
</SlideToCorner>

However, when it animates it keeps resetting back to it's original position halfway through the animation:

I can confirm that it is not the matchingStatus === MATCHING_STATES.CONFIRMING that is causing it.

rstar · Accepted Answer · 2017-06-17 12:35:36Z

2

Add forwards in

animation: ${slideToCorner} 0.5s linear forwards

Or use animation-fill-mode: forwards

Check the animation-fill-mode property for different behaviors

answered Jun 17, 2017 at 12:35

rstar

1,0061 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bigpotato Over a year ago

woahhhhhh it worked!! i've never seen animation-fill-mode

Collectives™ on Stack Overflow

Styled Components + React: CSS transition keeps resetting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related