Motion UI on Page Load Not Working

Question

I am using Foundation 6 and am importing Motion UI Transitions and Animations in my SASS file.

But when doing something like below, no animations occur. What am I missing?!

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

Thanks

Unless you have a Sass->CSS compilation issue, **only post the compiled CSS** (and the necessary HTML to reproduce the problem). — cimmanon, Mar 09 '16 at 13:37
That's great. The people who are able to help you are not interested in installing Sass, Foundation, MotionUI, and then guessing at what markup is necessary to reproduce the problem. Again, unless your problem is with Sass, **ONLY POST THE COMPILED CSS (and the markup necessary to reproduce the problem)**. — cimmanon, Mar 10 '16 at 15:27

score 0 · Answer 1 · answered May 01 '21 at 08:47

mui-animation alone doesn't set the animation-duration property, so you won't see the animation "playing".

Try this:

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

Guessing from your code you might also want animation-iteration-count: infinite.

Have a look at the implementation of @mixin motion-ui-animations (in _classes.scss). There you can see the various parts required for "ready-to-use" CSS classes.

Motion UI on Page Load Not Working

1 Answers1