Skip to content

Instantly share code, notes, and snippets.

@bsakhanov

bsakhanov/animation-fast.markdown

Created May 30, 2019 02:07
Show Gist options
  • Save bsakhanov/fac5c420b17e782170abd7eee47dbba2 to your computer and use it in GitHub Desktop.
Save bsakhanov/fac5c420b17e782170abd7eee47dbba2 to your computer and use it in GitHub Desktop.
Download ZIP
Animation fast
Raw
index.html
<div class="uk-container">
<h2 id="animation-delay">Animation fast</h2>
<div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="cls: uk-animation-fade animation-fast; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
</div>
<h2>Animation slow</h2>
<div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="cls: uk-animation-fade animation-slow; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
</div>
</div>
Raw
script.js
// If i use jquery i have to link the file
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit-icons.min.js"></script>
Raw
style.css
.uk-animation-fade.animation-fast {
animation-duration: 0.1s;
}
.uk-animation-fade.animation-slow {
animation-duration: 1.5s;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/css/uikit.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment