CODEWITHSUNDEEP
csssasszurb-foundation-6motionui
Huw Rowlands
Huw Rowlands

Reputation: 433

Motion UI on Page Load Not Working

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

Upvotes: 1

Views: 479

Answers (1)

Daniel Rikowski
Daniel Rikowski

Reputation: 72544

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.

Upvotes: 0

Related Questions