diff options
Diffstat (limited to 'scss/uikit/components/animation.scss')
| -rw-r--r-- | scss/uikit/components/animation.scss | 390 |
1 files changed, 390 insertions, 0 deletions
diff --git a/scss/uikit/components/animation.scss b/scss/uikit/components/animation.scss new file mode 100644 index 00000000..c1d91928 --- /dev/null +++ b/scss/uikit/components/animation.scss @@ -0,0 +1,390 @@ +// Name: Animation +// Description: Utilities for keyframe animations +// +// Component: `uk-animation-*` +// +// Modifiers: `uk-animation-reverse` +// `uk-animation-fast` +// `uk-animation-fade` +// `uk-animation-scale-up` +// `uk-animation-scale-down` +// `uk-animation-slide-top-*` +// `uk-animation-slide-bottom-*` +// `uk-animation-slide-left-*` +// `uk-animation-slide-right-*` +// `uk-animation-kenburns` +// `uk-animation-shake` +// +// Sub-objects: `uk-animation-toggle` +// +// States: `uk-hover` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$animation-duration: 0.5s !default; +$animation-fade-duration: 0.8s !default; +$animation-kenburns-duration: 15s !default; +$animation-fast-duration: 0.1s !default; + +$animation-slide-small-translate: 10px !default; +$animation-slide-medium-translate: 50px !default; + + +/* ======================================================================== + Component: Animation + ========================================================================== */ + +[class*='uk-animation-'] { + animation-duration: $animation-duration; + animation-timing-function: ease-out; + animation-fill-mode: both; +} + + +/* Direction modifier + ========================================================================== */ + +.uk-animation-reverse { + animation-direction: reverse; + animation-timing-function: ease-in; +} + + +/* Animations for scrollspy + ========================================================================== */ + +/* + * Fade + */ + +.uk-animation-fade { + animation-name: uk-fade; + animation-duration: $animation-fade-duration; + animation-timing-function: linear; +} + +/* + * Scale + */ + +.uk-animation-scale-up { animation-name: uk-fade-scale-02; } +.uk-animation-scale-down { animation-name: uk-fade-scale-18; } + +/* + * Slide + */ + +.uk-animation-slide-top { animation-name: uk-fade-top; } +.uk-animation-slide-bottom { animation-name: uk-fade-bottom; } +.uk-animation-slide-left { animation-name: uk-fade-left; } +.uk-animation-slide-right { animation-name: uk-fade-right; } + +/* + * Slide Small + */ + +.uk-animation-slide-top-small { animation-name: uk-fade-top-small; } +.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; } +.uk-animation-slide-left-small { animation-name: uk-fade-left-small; } +.uk-animation-slide-right-small { animation-name: uk-fade-right-small; } + +/* + * Slide Medium + */ + +.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; } +.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; } +.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; } +.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; } + +/* + * Kenburns + */ + +.uk-animation-kenburns { + animation-name: uk-scale-kenburns; + animation-duration: $animation-kenburns-duration; +} + +/* + * Shake + */ + +.uk-animation-shake { animation-name: uk-shake; } + + +/* Duration modifier + ========================================================================== */ + +.uk-animation-fast { animation-duration: $animation-fast-duration; } + + +/* Enable animation only on hover +========================================================================== */ + +/* + * Note: Firefox and IE needs this because animations are not triggered when switching between display `none` and `block` + */ + +.uk-animation-toggle:not(:hover):not(.uk-hover) [class*='uk-animation-'] { animation-name: none; } + + +/* Keyframes used by animation classes + ========================================================================== */ + +/* + * Fade + */ + +@keyframes uk-fade { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +/* + * Slide Top + */ + +@keyframes uk-fade-top { + 0% { + opacity: 0; + transform: translateY(-100%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Bottom + */ + +@keyframes uk-fade-bottom { + 0% { + opacity: 0; + transform: translateY(100%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Left + */ + +@keyframes uk-fade-left { + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Right + */ + +@keyframes uk-fade-right { + 0% { + opacity: 0; + transform: translateX(100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Top Small + */ + +@keyframes uk-fade-top-small { + 0% { + opacity: 0; + transform: translateY(-$animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Bottom Small + */ + +@keyframes uk-fade-bottom-small { + 0% { + opacity: 0; + transform: translateY($animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Left Small + */ + +@keyframes uk-fade-left-small { + 0% { + opacity: 0; + transform: translateX(-$animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Right Small + */ + +@keyframes uk-fade-right-small { + 0% { + opacity: 0; + transform: translateX($animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Top Medium + */ + +@keyframes uk-fade-top-medium { + 0% { + opacity: 0; + transform: translateY(-$animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Bottom Medium + */ + +@keyframes uk-fade-bottom-medium { + 0% { + opacity: 0; + transform: translateY($animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Left Medium + */ + +@keyframes uk-fade-left-medium { + 0% { + opacity: 0; + transform: translateX(-$animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Right Medium + */ + +@keyframes uk-fade-right-medium { + 0% { + opacity: 0; + transform: translateX($animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Scale Up + */ + +@keyframes uk-fade-scale-02 { + 0% { + opacity: 0; + transform: scale(0.2); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* + * Scale Down + */ + +@keyframes uk-fade-scale-18 { + 0% { + opacity: 0; + transform: scale(1.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* + * Kenburns + */ + +@keyframes uk-scale-kenburns { + 0% { transform: scale(1); } + 100% { transform: scale(1.2); } +} + +/* + * Shake + */ + +@keyframes uk-shake { + 0%, 100% { transform: translateX(0); } + 10% { transform: translateX(-9px); } + 20% { transform: translateX(8px); } + 30% { transform: translateX(-7px); } + 40% { transform: translateX(6px); } + 50% { transform: translateX(-5px); } + 60% { transform: translateX(4px); } + 70% { transform: translateX(-3px); } + 80% { transform: translateX(2px); } + 90% { transform: translateX(-1px); } +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();} + +// @mixin hook-animation-misc(){} |