Animations

Sequential show

// available options
animation: 'uk-animation-scale-up', // animation for the sequential show
duration: '320', // animation duration in ms
delay: 0.4, // delay multiplier
target: '' // element to animate

// example
data-sc-sequence-show='{"target" : ".uk-card", "animation": "uk-animation-slide-left", "delay": 1.2, "duration": 480}'

<div data-sc-sequence-show='{"target" : ".uk-card"}'></div>

<div data-sc-sequence-show='{"target" : ".uk-card", "animation": "uk-animation-slide-bottom-medium", "delay": 1.5}'></div>

<div data-sc-sequence-show='{"target" : ".uk-card", "animation": "uk-animation-scale-down", "delay": 1, "duration": 240}'></div>

UIkit animations

<div class="uk-animation-fade"></div>
<div class="uk-animation-scale-up"></div>
<div class="uk-animation-scale-down"></div>
<div class="uk-animation-shake"></div>
<div class="uk-animation-slide-left"></div>
<div class="uk-animation-slide-top"></div>
<div class="uk-animation-slide-bottom"></div>
<div class="uk-animation-slide-right"></div>
<div class="uk-animation-slide-left-small"></div>
<div class="uk-animation-slide-top-small"></div>
<div class="uk-animation-slide-bottom-small"></div>
<div class="uk-animation-slide-right-small"></div>
<div class="uk-animation-slide-left-medium"></div>
<div class="uk-animation-slide-top-medium"></div>
<div class="uk-animation-slide-bottom-medium"></div>
<div class="uk-animation-slide-right-medium"></div>

Reverse modifier

<div class="uk-animation-fade uk-animation-reverse"></div>
<div class="uk-animation-scale-up uk-animation-reverse"></div>
<div class="uk-animation-scale-down uk-animation-reverse"></div>
<div class="uk-animation-shake uk-animation-reverse"></div>
<div class="uk-animation-slide-left uk-animation-reverse"></div>
<div class="uk-animation-slide-top uk-animation-reverse"></div>
<div class="uk-animation-slide-bottom uk-animation-reverse"></div>
<div class="uk-animation-slide-right uk-animation-reverse"></div>
<div class="uk-animation-slide-left-small uk-animation-reverse"></div>
<div class="uk-animation-slide-top-small uk-animation-reverse"></div>
<div class="uk-animation-slide-bottom-small uk-animation-reverse"></div>
<div class="uk-animation-slide-right-small uk-animation-reverse"></div>
<div class="uk-animation-slide-left-medium uk-animation-reverse"></div>
<div class="uk-animation-slide-top-medium uk-animation-reverse"></div>
<div class="uk-animation-slide-bottom-medium uk-animation-reverse"></div>
<div class="uk-animation-slide-right-medium uk-animation-reverse"></div>