CSS关键帧的混合比较少 [英] CSS Less mixins for keyframes

问题描述

如何为关键帧写入less mixin。
我试过以下方式，但它是给错误，

how to write Less mixin for keyframes. I have tried in the following way but it is giving error, ParseError: Directive options not recognized.

.keyFrameAlert(@-webkit-keyframes);

Mixin

Mixin

.keyFrameAlert(@keyFrame){
    @keyFrame alert {
        0% { 
            opacity: 0; 
        }
        50% {
            opacity: 1; 
        }
        100% { 
            top: 0; 
        }
    }
}

。

推荐答案

我认为可能会因为 @ 前缀，所以你传递的 @ - webkit-keyframes 它认为你试图传递一个同名的变量。

I think it might be throwing an error because of the @ prefix for your keyframes, so where your passing @-webkit-keyframes it thinks your trying to pass it a variable with that same name.

这里有一个稍微不同的方法，你可以声明你的关键帧，并在里面添加一个包含关键帧集合的类。

There is a slightly different approach to this, where you can declare your keyframes, and add a class inside it which contains your keyframe set.

@-webkit-keyframes alert {.keyframes;}
@keyframes alert {.keyframes;}

.keyframes () {
    0% { 
        opacity: 0; 
    }
    50% {
        opacity: 1; 
    }
    100% { 
        top: 0; 
    }
}

这与您之前尝试的略有不同，因为您仍需要输入所有的供应商前缀，但您只需要在一个位置更改关键帧。

This is slightly different to what you were trying previously, as you would still need to type out all of your vendor prefixes, but you only need to change your keyframes in one place.

这篇关于CSS关键帧的混合比较少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！