html - 关键帧在与 LESSHat 的 LESS 混合中不起作用

标签 html css animation css-animations

这是我尝试生成的标准 CSS,但我想使用 LESS Mixin 来完成这项工作。您可以使用纯 css 查看工作演示 here

纯 CSS

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes rotate-fix {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-fix {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

我正在使用与 following post 中相同的 mixin如下所示。

.keyframes(@name, @frames) {
    @-webkit-keyframes @name { @frames(); }
    @-moz-keyframes @name { @frames(); }
    @-ms-keyframes @name { @frames(); }
    @-o-keyframes @name { @frames(); }
    @keyframes @name { @frames(); }
}

我是这样使用它的:

.keyframes(rotate, {
    0%{
        .transform(rotate(0)); // This is transform mixin from LESSHat
    }

    100%{
        .transform(rotate(180));
    }
});

.keyframes(rotate-fix, {
    0%{
        .transform(rotate(0));
    }

    100%{
        .transform(rotate(360));
    }
});

但是,它不起作用。按钮的动画不会旋转。当不将其作为混入时,该代码可以正常工作。谁能告诉我我在这里缺少什么?

生成的 CSS 如下所示:

@-moz-keyframes rotate {
  .....
}
@-o-keyframes rotate {
  .....
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@-moz-keyframes rotate-fix {
  .....
}
@-o-keyframes rotate-fix {
  .....
}
@-webkit-keyframes rotate-fix {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-fix {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

最佳答案

一定要插值

像这样:

    .keyframes(~'<keyframes-name>, <keyframes-definition>') 

看看Less Hat docs keyframes section .

关于html - 关键帧在与 LESSHat 的 LESS 混合中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27679363/

相关文章:

html - 如何让 ul 中的 li 以零空格向左对齐,并且所有 li 垂直显示?

html - 只触发一次动画,ani js scrollreveal

html - CSS 中的表格单元格填充底部不起作用

CSS 表单对齐在 Chrome 中很好,但在 Firefox 中关闭

javascript - IE7 - jquery addClass() 打破 float 元素

jquery - 在应用类之前更改CSS类不生效

css - 在 Angular 4 中动画化图像交换(在 AngularJS 中是 ng-animate-swap)

javascript - 通过 CSS 或 JavaScript/JQuery 设置元素高度

html - iPad 的 Safari 在将 jpg 渲染为背景图像时有问题吗?

javascript - jQuery:如何检查某些复选框是否被选中,并相应地更改样式?