animation
Description
animation subsystem block provides child elements with animations.
animation types:
deceleration, standard, acceleration, sharp
Installation
yarn add @moki.codes/mokui-animation
Styles
@import "@moki.codes/mokui-animation/dist/mokui-animation.css"
Basic Usage
<div class="animation">
animation variables available to all children
<div style="
transition: opacity
var(--animation-duration-s)
cubic-bezier(
var(--animation-fn-sharp-1),
var(--animation-fn-sharp-2),
var(--animation-fn-sharp-3),
var(--animation-fn-sharp-4));
">
animated content
</div>
</div>
Variables
animation block provides following animation variables for usage inside cubic-bezier:
deceleration:
-
--animation-fn-deceleration-1
-
--animation-fn-deceleration-2
-
--animation-fn-deceleration-3
-
--animation-fn-deceleration-4
standard:
-
--animation-fn-standard-1
-
--animation-fn-standard-2
-
--animation-fn-standard-3
-
--animation-fn-standard-4
acceleration:
-
--animation-fn-acceleration-1
-
--animation-fn-acceleration-2
-
--animation-fn-acceleration-3
-
--animation-fn-acceleration-4
sharp:
-
--animation-fn-sharp-1
-
--animation-fn-sharp-2
-
--animation-fn-sharp-3
-
--animation-fn-sharp-4
animation durations:
-
--animation-duration-xs,
-
--animation-duration-s,
-
--animation-duration-m,
-
--animation-duration-l,
-
--animation-duration-xl,
-
--animation-duration-2xl,
-
--animation-duration-3xl