Animation

A basic collection of smooth animations to use within your page.

Usage

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Class	Description
`.uk-animation-fade`	The element fades in.
`.uk-animation-scale-up`	The element scales up.
`.uk-animation-scale-down`	The element scales down.
`.uk-animation-slide-top`	The element slides in from the top.
`.uk-animation-slide-bottom`	The element slides in from the bottom.
`.uk-animation-slide-left`	The element slides in from the left.
`.uk-animation-slide-right`	The element slides in from the right.
`.uk-animation-shake`	The element shakes.
`.uk-animation-scale`	The element scales down without fading in.

Example

Click on any of the boxes to see the animation.

Fade

Scale up

Scale down

Shake

Slide top

Slide bottom

Slide left

Slide right

Scale

Markup

<div class="uk-animation-fade">...</div>

Reverse modifier

By default, all aimations are incoming. To reverse any animation, add the .uk-animation-reverse class.

Example

Click on any of the boxes to see the animation.

Fade

Scale up

Scale down

Shake

Slide top

Slide bottom

Slide left

Slide right

Scale

Markup

<div class="uk-animation-fade uk-animation-reverse">...</div>

Duration modifier

To stretch the animation duration to 15 seconds, add the .uk-animation-15 class.

Example

Slide right

Markup

<div class="uk-animation-slide-right uk-animation-15">...</div>

Origin modifier

By default, scaling animations originate from the center. To modify this behavior, add one of these classes.

Class	Description
`.uk-animation-top-left`	The animation spreads from the top left.
`.uk-animation-top-center`	The animation spreads from the top center.
`.uk-animation-top-right`	The animation spreads from the top right.
`.uk-animation-middle-left`	The animation spreads from the middle left.
`.uk-animation-middle-right`	The animation spreads from the middle right.
`.uk-animation-bottom-left`	The animation spreads from the bottom left.
`.uk-animation-bottom-center`	The animation spreads from the bottom center.
`.uk-animation-bottom-right`	The animation spreads from the bottom right.

Example

Click on any of the boxes to see the animation.

Top Left

Top Center

Top Right

Middle Left

Middle Right

Bottom Left

Bottom Center

Bottom Right

Animation hover

To trigger an animation on hover, just add the .uk-animation-hover class to the animated element itself or to a container.

Example

Fade

Slide right

Markup

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>

Published

Luglio 4, 2019

Animation

Usage

Example

Markup

Reverse modifier

Example

Markup

Duration modifier

Example

Markup

Origin modifier

Example

Animation hover

Example

Markup

Leave a comment

Cancel reply

Lascia un commento Annulla risposta

INTERNATIONAL BASKETBALL ACADEMY