styled-components-iterate

sciteration.js

const Wrapper = styled.div`
  display: inline-block;
  animation-duration: ${({ duration }) => (duration ? `${duration}s` : '1s')};
  animation-name: ${({ animation }) =>
    animation ? animation : 'no-animation'};
  animation-fill-mode: forwards;
  animation-iteration-count: ${({ iteration }) =>
    iteration ? iteration : '1'};

  &:hover {
    ${({ hoverTransitions }) =>
      hoverTransitions.forEach(transition => transition)}};
  }

  &:focus {
  }

  &:active {
  }
`;