トランスフォームを使用してキーフレームのサラウンドでミックスインを作成する方法

Question

私はsassファイルで作業しています。私はミックスインに関連した問題があります。私はキーフレームのためのミックスインを作成し、私はどのように作成するのか分かりません。私は以下の私のコードを追加しました。私のコードを見直し、このためのミックスインを作成してください。このコードを準拠したCSSファイルに直接コピーすると、CSSファイルが自動的にこれらのキーフレームを削除します。私はsassファイルで作業しています。私はミックスインに関連した問題があります。私はキーフレームのためのミックスインを作成し、私はどのように作成するのか分かりません。私は以下の私のコードを追加しました。私のコードを見直し、このためのミックスインを作成してください。このコードを準拠した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()が変換プロパティとして使用されます。コンパイルコードを表示するには

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; 
     } 
    }