Question

我正在使用sass文件。我有一个问题相关mixins。我为关键帧创建混合，我不知道如何创建。我在下面添加了我的代码。请查看我的代码，请为此创建一个混音。如果我直接在编译的css文件中复制此代码，然后css文件自动删除这些关键帧。我在sass文件中工作。我有一个问题相关mixins。我为关键帧创建混合，我不知道如何创建。我在下面添加了我的代码。请查看我的代码，请为此创建一个混音。如果我直接在编译的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

以下是scala.concurrent.Future的示例。这可能会对您有所帮助。如果mixin用于调用关键帧前缀，则keyframe()用于转换属性。

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

prefixed()

注意：你需要在mixin下面声明这个。

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

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

        }

如何使用transform为关键帧在saas中创建mixins

1 个答案: