如何使用变换在saas中为关键帧创建mixin

Question

我正在sass文件中工作。我有一个与mixin有关的问题。我为关键帧创建混合，我不知道如何创建。我在下面添加了我的代码。请查看我的代码，并为此创建一个混合。如果我直接复制这个代码在符合css文件，然后css文件自动删除这些关键frames.I工作在sass文件。我有一个与mixin有关的问题。我为关键帧创建混合，我不知道如何创建。我在下面添加了我的代码。请查看我的代码，并为此创建一个混合。如果我将此代码直接复制到css文件中，那么css文件会自动删除这些关键帧。

.heart-beat { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    height: 25px; 
    width: 25px; 
    z-index: 10; 
    border: 5px solid #ef5350; 
    border-radius: 70px; 
    -moz-animation: heartbit 1s ease-out; 
    -moz-animation-iteration-count: infinite; 
    -o-animation: heartbit 1s ease-out; 
    -o-animation-iteration-count: infinite; 
    -webkit-animation: heartbit 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 


@-moz-keyframes heartbit { 
    0% { 
     -moz-transform: scale(0); 
     opacity: 0.0; } 
    25% { 
    -moz-transform: scale(0.1); 
     opacity: 0.1; } 
    50% { 
     -moz-transform: scale(0.5); 
     opacity: 0.3; } 
    75% { 
     -moz-transform: scale(0.8); 
     opacity: 0.5; } 
    100% { 
     -moz-transform: scale(1); 
     opacity: 0.0; } 
} 

@-webkit-keyframes heartbit { 
    0% { 
     -webkit-transform: scale(0); 
     opacity: 0.0; } 
    25% { 
     -webkit-transform: scale(0.1); 
     opacity: 0.1; } 
    50% { 
     -webkit-transform: scale(0.5); 
     opacity: 0.3; } 
    75% { 
     -webkit-transform: scale(0.8); 
     opacity: 0.5; } 
    100% { 
     -webkit-transform: scale(1); 
     opacity: 0.0; } 
} 

Answer 1

以下是mixin的示例。这可能对您有所帮助。 其中keyframe()用于调用关键帧前缀，则prefixed()用于transform属性。

要查看编译代码，请使用SASS Meister online tool

// This is for iterating `Keyframes`  
     @include keyframes(heartbit){ 

    // This is for iterating `transform` 
     @include prefixed(transform, scale(0.1); 

     } 

注意：您需要先声明这一点混入下方。

---

// Mixin 

// prefix declarations 
    @mixin prefixed($property, $value) { 

     -webkit-#{$property}: #{$value}; 
     -moz-#{$property}: #{$value}; 
     -ms-#{$property}: #{$value}; 
     -o-#{$property}: #{$value}; 
     #{$property}: #{$value}; 

    } 

    // prefix keyframes 
    @mixin keyframes($name) { 

     @-webkit-keyframes #{$name} { 
      @content; 
     } 

     @-moz-keyframes #{$name} { 
      @content; 
     } 

     @-ms-keyframes #{$name} { 
      @content; 
     } 

     @-o-keyframes #{$name} { 
      @content; 
     } 

     @keyframes #{$name} { 
     @content; 
     } 
    }