mixin @keyframe

Question

Witajcie, mam problem z mixinem keyframea. Chodzi o to, że muszę dać dużo @keyframes i chciałem dać mixina aby skrócić kod. Wygląda to następująco .

sun1{
    animation-name: orbit1;
  }

 @keyframes orbit1 {
    from {
      transform: rotate(40deg)
    }
    to {
      transform: rotate(400deg)
    }

  }

kod działa, ale chciałem zrobić mixin, tak to wygląda

 @mixin orbit($name,$start,$end) {
    @keyframes $name {
        from {
          transform: rotate($start)
        }
      
        to {
          transform: rotate($end)
        }
      }
  }

@include orbit(orbit1,40deg,400deg)

ale coś tu jest nie tak...., nie wiem jak mógłbym to zrobić, ktoś może wie? proszę o pomoc

Answer 1

@mixin orbit($name, $start, $end, $duration,$animation-iteration-count) {
  @keyframes #{$name} {
    from {transform: rotate($start)}
    to {transform: rotate($end)}
  }
	animation: #{$name} $duration $animation-iteration-count;
}

 .sun1{
	 @include orbit(aminate-1, 40deg,400deg,3s,infinite);
 }

 

Comments

dzięki bardzo, bardzo mi pomogłeś