Accepted answer

You could take a different approach, where your keyframes animation is instead defined as a function like this:

const slideAnim = (top, left) => keyframes`
  100% {
    top: ${ top };
    left: ${ left };

The function accepts input parameters that dictate the destination coordinates of top and left for that animation's final keyframe.

In your stlyed component (ie Box1), you'd then invoke slideAnim() with specific coordinates to each breakpoint, to achieve different animation behavior per breakpoint:

Declare responsive styling in the Box1 component, where destination
coordinates are specified for the animate on a per-breakpoint-basis
const Box1 = styled.div`
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  left: -100px;
  top: 80px;

  &.slide {

    animation: ${slideAnim('20px', '30px')} 0.4s ease-in-out forwards;

    @media (max-width: ${breakpoint}px) {
      animation: ${slideAnim('70px', '50px')} 0.4s ease-in-out forwards;

In summary, the idea is to shift the responsive styling into your styled component (ie Box1), while defining a reusable function that contains the common/shared keyframes for each responsive breakpoint.

Here's a working example - hope that helps!


Use keyframes outside of all blocks. eg:

import { IconButton} from "@material-ui/core"; 
const CloseButton = styled(IconButton)`
  padding: 3px !important;
  outline: none;

  @media only screen and (min-width: 728px) {
    padding: 4px !important;

Related Query

More Query from same tag