css - 页面加载时的 Motion UI 不起作用

Question

我正在使用 Foundation 6 并在我的 SASS 文件中导入 Motion UI 过渡和动画。

但是当做下面这样的事情时，不会出现动画。我错过了什么？！

.site-logo {
    text-align: center;
    margin-bottom: 0.4rem;
    @include mui-animation(spin(in, 360deg));
}

谢谢

Answer 1

mui-animation单独不设置animation-duration属性，所以你不会看到动画“播放”。

尝试这个：

.site-logo {
    text-align: center;
    margin-bottom: 0.4rem;
    @include mui-animation(spin(in, 360deg));

    animation-duration: map-get($motion-ui-speeds, default);
    // Or:
    // animation-duration: 500ms;
}

从您的代码中猜测您可能还想要animation-iteration-count: infinite.

看看@mixin motion-ui-animations(in _classes.scss) 的实现。在那里，您可以看到“即用型”CSS 类所需的各个部分。