Delay Css Animation Opacity In Styled-components

How to delay opacity to zero when certain condition is met in styled-component? Is it doable using css? const Wrap = styled.div` background: #ddd; width: 100px; height: 10px

Solution 1:

const Wrap = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
  transition: opacity 0.6s linear;
`;

you can add transition property to achieve the same