Scss mixin border animation doesn't work in the same way in styled component, in react, why?

Question

The animation works when i use it with scss, like this:

@mixin magicBorder($width, $color, $duration, $direction){
  position:relative;
    &:before{
      content:'';
      position:absolute;
      width:calc(100% + #{$width * 2});
      height:calc(100% + #{$width * 2});
      top:calc(#{$width}/-1);
      left:calc(#{$width}/-1);
      background:linear-gradient(to right, $color 0%, $color 100%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 0%, $color 100%), linear-gradient(to left, $color 0%, $color 100%);
      background-size: 65% $width, $width 200%, $width  200%, 0% $width, 0% $width;
      background-position: -150% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
      background-repeat:no-repeat, no-repeat;
      transition:transform $duration ease-in-out, background-position $duration ease-in-out, background-size $duration ease-in-out;
      transform:scaleX(0) rotate(180deg * $direction);
      transition-delay:$duration*2, $duration, 0s;
    }
    &:hover{
      &:before{
        background-size:200% $width, $width 400%, $width 400%, 55% $width, 55% $width;
        background-position:50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
        transform:scaleX(1) rotate(180deg * $direction);
        transition-delay:0s, $duration, $duration*2;
      }
    }
}

@include magicBorder(2px, red, 1s, 1);

But it doesn't work when i tried to implement it in a style component, like this

 const MagicBorder = ({ width, color, duration, direction }) => css`
position: relative;
&:before {  
position: absolute;  
content: "";
  width: calc(100% + ${width} * 8);
  height: calc(100% + ${width} * 2);
  top: calc(${width} / -10);
  left: calc(${width} / -1);
  background: linear-gradient(to right, ${color} 0%, ${color} 100%),
    linear-gradient(to top, ${color} 50%, transparent 50%),
    linear-gradient(to top, ${color} 50%, transparent 50%),
    linear-gradient(to right, ${color} 0%, ${color} 100%),
    linear-gradient(to left, ${color} 0%, ${color} 100%);
  background-size: 65% ${width}, ${width} 200%, ${width} 200%, 0% ${width}, 0% ${width};
  background-position: -150% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
  background-repeat: no-repeat;
  transition: transform ${duration} ease-in-out,
  background-position ${duration} ease-in-out,
  background-size ${duration} ease-in-out;
  transform: scaleX(0) rotate(180deg * ${direction});
  transition-delay: ${duration}*2, ${duration}, 0s;
}
  &:hover {
    &:before {
    background-size: 200% ${width}, ${width} 400%, ${width} 400%, 55% ${width}, 55% ${width};
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    transform: scaleX(1) rotate(180deg * ${direction});
    transition-delay: 0s, ${duration}, ${duration} * 2;
    }
  } 
`;

    ${MagicBorder({ width: '3px', color: 'rgba(121, 214, 250, 0.9)', duration: '1s', direction: '1' })};

Something from the transition doesn't transfer well when used in the styled component, and i don't know what doesn't work

Apply the animation to the div with the prepared examples that i wrote below, and see the differences:

scss example:

style {
 .magic-border {
   height: 50px;
   width: 300px;
   @include magicBorder(2px, red, 0.3s, 0);
}

<div class="magic-border></div>

styled-component example:

const StyledDiv = styled.div`
  height: 50px;
  width: 300px;
    ${MagicBorder({ width: '3px', color: 'rgba(121, 214, 250, 0.9)', duration: '1s', direction: '1' })};
`
<StyledDiv></StyledDiv>

Any help would be great:)! `

Answer 1

I think you just forgot to wrap transition duration calculations in calc like eg

${duration} * 2  

should be

calc(${duration}*2)