There’s rather a lot you are able to do with pure CSS animation, however pausing & looping an animation just isn’t doable with the present W3 spec.

How to Use CSS3 Transitions & Animations to Highlight UI Changes

Use CSS3 Transitions & Animations to Spotlight UI Adjustments

Designers and artists have an extended historical past of experimenting with movement, results, and totally different sorts of illusions with…Learn extra

However with a free software like WAIT! Animate you may really create looped animations from scratch with customized delays between every loop. This will appear to be an earthly job however it solves a ache level for a lot of builders.

wait animate homepagewait animate homepage

It needs to be famous that there’s a CSS property known as animation-delay which delays the begin of a CSS animation. Nevertheless it doesn’t have an effect on a repeating animation because it solely delays the place to begin.

WAIT! Animate auto-calculates what number of pauses must be positioned inside customized animation keyframes to create the precise pause period you want between loops. This might be performed by hand however it’s extraordinarily convolved, to not point out tremendous annoying.

This net app can work with any CSS3 animation characteristic, together with rotations and transforms. You’re not writing any new CSS properties however quite constructing on prime of the keyframes characteristic to create pauses primarily based on percentages (from zero% to 100%) contained in the animation.

Take a look at the home page to see a couple of examples in motion. It’s fairly clear what you are able to do and the supply code is correct there to repeat/paste into your individual work.

Please observe that is not a fully-fledged library. It’s a generator that creates your CSS code on-the-fly primarily based on no matter you want for the animation delay.

wait animate demowait animate demo

In case you do desire a easier resolution off-site then you may obtain the Sass mixin. This can be a bit trickier as a result of it requires a Sass map, so that you’ll want to know methods to add customized properties and write your syntax correctly.

Right here’s an instance of the way you’d name the mixin:

@embody waitAnimate(
    animationName: animName,
    keyframes: (
      zero: (
        remodel: scale(1),
        background-color: blue
      50: (
        remodel: scale(2),
        background-color: inexperienced
      100: (
        remodel: scale(three),
        background-color: crimson
    period: 2,
    waitTime: 1,
    timingFunction: ease,
    iterationCount: infinite

Professional net builders should not have any drawback studying the ropes and constructing this right into a reusable mixin. However novice builders might battle to get it working, therefore the net app.

All this supply code is offered at no cost on GitHub if you wish to obtain a duplicate regionally. However since that is such an odd characteristic it’s not one thing you’ll in all probability want in lots of initiatives. That’s why the WAIT! Animate net app needs to be greater than sufficient that can assist you remedy a one-off drawback of delaying looped animations with pure CSS.

It’s a extremely enjoyable hack that’s additionally fairly obscure by design. But it surely goes to indicate simply how a lot is feasible with CSS3 and slightly ingenuity.

How to Create Animations and Transitions with Motion UI

Create Animations and Transitions with Movement UI

Animations and transitions enable designers to visualise change and differentiate content material. Animations and transitions are transferring results that…Learn extra

Source link