@luanlu/mk-motion 1.2.0 → 1.2.1

package/src/motion/component-motion.ts

@@ -0,0 +1,177 @@
+import { Animator } from '../core/animator.ts'
+import type { AnimationName } from '../core/utils.ts'
+
+export type MicroAnimation = 'lift' | 'glow' | 'scale' | 'slideUp' | 'none'
+
+export interface MotionOptions {
+  /** Mount entrance animation */
+  enter?: 'fadeIn' | 'slideInUp' | 'slideInDown' | 'slideInLeft' | 'slideInRight' | 'zoomIn' | 'bounceIn' | 'none'
+  /** Unmount exit animation */
+  exit?: 'fadeOut' | 'slideOutUp' | 'slideOutDown' | 'zoomOut' | 'none'
+  /** Hover micro-interaction */
+  hover?: MicroAnimation
+  /** Active/press micro-interaction */
+  active?: 'press' | 'none'
+  /** Focus ring animation */
+  focus?: 'ring' | 'none'
+  /** Duration in ms */
+  duration?: number
+  /** Delay in ms */
+  delay?: number
+  /** Easing */
+  easing?: string
+}
+
+const defaultOptions: Required<MotionOptions> = {
+  enter: 'fadeIn',
+  exit: 'fadeOut',
+  hover: 'none',
+  active: 'none',
+  focus: 'none',
+  duration: 250,
+  delay: 0,
+  easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+}
+
+/**
+ * Attach motion behaviors to a DOM element.
+ * Returns controller to play enter/exit and manage state animations.
+ */
+export function withMotion(el: HTMLElement, options: MotionOptions = {}) {
+  const opts = { ...defaultOptions, ...options }
+  const animator = opts.enter !== 'none' ? new Animator(el) : null
+  const style = el.style
+  const originalTransition = style.transition
+
+  // Hover
+  let hoverActive = false
+  function onMouseEnter() {
+    if (opts.hover === 'none') return
+    hoverActive = true
+    applyHover(true)
+  }
+  function onMouseLeave() {
+    if (!hoverActive) return
+    hoverActive = false
+    applyHover(false)
+  }
+
+  function applyHover(active: boolean) {
+    const t = `transform ${opts.duration}ms ${opts.easing}, box-shadow ${opts.duration}ms ${opts.easing}`
+    switch (opts.hover) {
+      case 'lift':
+        style.transition = t
+        style.transform = active ? 'translateY(-2px)' : ''
+        style.boxShadow = active ? 'var(--mk-shadow-md)' : ''
+        break
+      case 'glow':
+        style.transition = `box-shadow ${opts.duration}ms ${opts.easing}`
+        style.boxShadow = active ? 'var(--mk-shadow-glow)' : ''
+        break
+      case 'scale':
+        style.transition = `transform ${opts.duration}ms ${opts.easing}`
+        style.transform = active ? 'scale(1.02)' : ''
+        break
+      case 'slideUp':
+        style.transition = t
+        style.transform = active ? 'translateY(-4px)' : ''
+        break
+    }
+  }
+
+  // Active / Press
+  function onMouseDown() {
+    if (opts.active === 'press') {
+      style.transition = `transform ${opts.duration * 0.5}ms ${opts.easing}`
+      style.transform = 'scale(0.97)'
+    }
+  }
+  function onMouseUp() {
+    if (opts.active === 'press') {
+      style.transform = hoverActive ? (opts.hover === 'lift' ? 'translateY(-2px)' : opts.hover === 'scale' ? 'scale(1.02)' : '') : ''
+    }
+  }
+
+  // Focus ring
+  function onFocus() {
+    if (opts.focus === 'ring') {
+      style.outline = 'none'
+      style.boxShadow = '0 0 0 2px var(--mk-primary-muted), 0 0 0 4px var(--mk-primary)'
+      style.transition = `box-shadow ${opts.duration}ms ${opts.easing}`
+    }
+  }
+  function onBlur() {
+    if (opts.focus === 'ring') {
+      style.boxShadow = ''
+    }
+  }
+
+  // Attach listeners
+  el.addEventListener('mouseenter', onMouseEnter)
+  el.addEventListener('mouseleave', onMouseLeave)
+  el.addEventListener('mousedown', onMouseDown)
+  el.addEventListener('mouseup', onMouseUp)
+  el.addEventListener('focus', onFocus)
+  el.addEventListener('blur', onBlur)
+
+  return {
+    /** Play entrance animation */
+    async playEnter() {
+      if (!animator || opts.enter === 'none') return
+      await animator.animate(opts.enter, { duration: opts.duration, delay: opts.delay })
+    },
+
+    /** Play exit animation. Returns a Promise that resolves when animation completes. */
+    async playExit() {
+      if (!animator || opts.exit === 'none') return
+      await animator.animate(opts.exit, { duration: opts.duration })
+    },
+
+    /** Programmatically set hover state */
+    setHover(active: boolean) {
+      if (active) onMouseEnter()
+      else onMouseLeave()
+    },
+
+    /** Clean up all listeners and styles */
+    destroy() {
+      el.removeEventListener('mouseenter', onMouseEnter)
+      el.removeEventListener('mouseleave', onMouseLeave)
+      el.removeEventListener('mousedown', onMouseDown)
+      el.removeEventListener('mouseup', onMouseUp)
+      el.removeEventListener('focus', onFocus)
+      el.removeEventListener('blur', onBlur)
+      style.transition = originalTransition
+      style.transform = ''
+      style.boxShadow = ''
+      style.outline = ''
+      animator?.stop()
+    },
+  }
+}
+
+/**
+ * Stagger children entrance animation.
+ */
+export function staggerEnter(
+  container: HTMLElement,
+  selector: string,
+  _animation?: AnimationName,
+  options?: { duration?: number; stagger?: number; delay?: number }
+) {
+  const children = container.querySelectorAll(selector)
+  if (children.length === 0) return
+
+  const delay = options?.delay ?? 100
+  const stagger = options?.stagger ?? 80
+  const duration = options?.duration ?? 400
+
+  children.forEach((el, i) => {
+    const htmlEl = el as HTMLElement
+    htmlEl.style.opacity = '0'
+    setTimeout(() => {
+      htmlEl.style.transition = `opacity ${duration}ms ease`
+      htmlEl.style.opacity = '1'
+    }, delay + i * stagger)
+  })
+}

package/src/presets/index.ts

@@ -0,0 +1,69 @@
+import type { AnimationOptions } from '../core/utils.ts'
+import { Animator } from '../core/animator.ts'
+
+function $(el: HTMLElement | string) {
+  return new Animator(el)
+}
+
+/* ---------- Fade ---------- */
+export function fadeIn(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('fadeIn', opts)
+}
+export function fadeOut(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('fadeOut', opts)
+}
+
+/* ---------- Slide ---------- */
+export function slideInUp(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('slideInUp', opts)
+}
+export function slideInDown(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('slideInDown', opts)
+}
+export function slideInLeft(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('slideInLeft', opts)
+}
+export function slideInRight(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('slideInRight', opts)
+}
+export function slideOutUp(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('slideOutUp', opts)
+}
+export function slideOutDown(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('slideOutDown', opts)
+}
+
+/* ---------- Zoom ---------- */
+export function zoomIn(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('zoomIn', opts)
+}
+export function zoomOut(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('zoomOut', opts)
+}
+
+/* ---------- Bounce ---------- */
+export function bounceIn(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('bounceIn', opts)
+}
+export function bounceOut(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('bounceOut', opts)
+}
+
+/* ---------- Flip ---------- */
+export function flipInX(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('flipInX', opts)
+}
+export function flipInY(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('flipInY', opts)
+}
+
+/* ---------- Misc ---------- */
+export function shake(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('shake', opts)
+}
+export function pulse(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('pulse', opts)
+}
+export function rotateIn(el: HTMLElement | string, opts?: AnimationOptions) {
+  return $(el).animate('rotateIn', opts)
+}

package/src/scroll/scroll-trigger.ts

@@ -0,0 +1,104 @@
+import type { AnimationName } from '../core/utils.ts'
+
+export interface ScrollTriggerOptions {
+  threshold?: number        // 0~1，元素进入视口多少比例时触发
+  rootMargin?: string       // 类似 CSS margin，扩大/缩小视口判定范围
+  once?: boolean            // 是否只触发一次
+  duration?: number
+  easing?: string
+}
+
+const DEFAULT_SCROLL_OPTS: Required<ScrollTriggerOptions> = {
+  threshold: 0.2,
+  rootMargin: '0px',
+  once: true,
+  duration: 500,
+  easing: 'ease',
+}
+
+export class ScrollTrigger {
+  private observer: IntersectionObserver | null = null
+  private elements = new Map<Element, { name: AnimationName; opts: ScrollTriggerOptions }>()
+
+  watch(
+    selector: string | Element | Element[],
+    animationName: AnimationName,
+    options: ScrollTriggerOptions = {}
+  ): this {
+    const opts = { ...DEFAULT_SCROLL_OPTS, ...options }
+    let targets: Element[]
+    if (typeof selector === 'string') {
+      targets = Array.from(document.querySelectorAll(selector))
+    } else if (Array.isArray(selector)) {
+      targets = selector
+    } else {
+      targets = [selector as Element]
+    }
+
+    if (!this.observer) {
+      this.observer = new IntersectionObserver(
+        (entries) => this.handleEntries(entries),
+        {
+          threshold: opts.threshold,
+          rootMargin: opts.rootMargin,
+        }
+      )
+    }
+
+    targets.forEach((el) => {
+      this.elements.set(el, { name: animationName, opts })
+      this.observer!.observe(el)
+    })
+
+    return this
+  }
+
+  private handleEntries(entries: IntersectionObserverEntry[]): void {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const config = this.elements.get(entry.target)
+        if (!config) return
+
+        const htmlEl = entry.target as HTMLElement
+        const className = `mk-animated mk-${config.name}`
+
+        htmlEl.classList.add(...className.split(' '))
+        htmlEl.style.setProperty('--mk-duration', `${config.opts.duration}ms`)
+        htmlEl.style.setProperty('--mk-easing', config.opts.easing!)
+
+        const onEnd = (e: AnimationEvent) => {
+          if (e.animationName.startsWith('mk-')) {
+            htmlEl.removeEventListener('animationend', onEnd)
+            if (config.opts.once) {
+              htmlEl.classList.remove(...className.split(' '))
+            }
+          }
+        }
+
+        htmlEl.addEventListener('animationend', onEnd)
+
+        if (config.opts.once) {
+          this.observer?.unobserve(entry.target)
+          this.elements.delete(entry.target)
+        }
+      }
+    })
+  }
+
+  destroy(): void {
+    this.observer?.disconnect()
+    this.observer = null
+    this.elements.clear()
+  }
+}
+
+/**
+ * 快捷方法：为选择器下的所有元素添加滚动触发动画
+ */
+export function scrollAnimate(
+  selector: string | Element | Element[],
+  animationName: AnimationName,
+  options?: ScrollTriggerOptions
+): ScrollTrigger {
+  return new ScrollTrigger().watch(selector, animationName, options)
+}

package/src/styles/animations.css

@@ -0,0 +1,135 @@
+/* ========== Fade ========== */
+@keyframes mk-fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes mk-fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* ========== Slide ========== */
+@keyframes mk-slideInUp {
+  from { opacity: 0; transform: translate3d(0, 30px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+@keyframes mk-slideInDown {
+  from { opacity: 0; transform: translate3d(0, -30px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+@keyframes mk-slideInLeft {
+  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+@keyframes mk-slideInRight {
+  from { opacity: 0; transform: translate3d(30px, 0, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+@keyframes mk-slideOutUp {
+  from { opacity: 1; transform: translate3d(0, 0, 0); }
+  to { opacity: 0; transform: translate3d(0, -30px, 0); }
+}
+
+@keyframes mk-slideOutDown {
+  from { opacity: 1; transform: translate3d(0, 0, 0); }
+  to { opacity: 0; transform: translate3d(0, 30px, 0); }
+}
+
+/* ========== Zoom ========== */
+@keyframes mk-zoomIn {
+  from { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); }
+  to { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes mk-zoomOut {
+  from { opacity: 1; transform: scale3d(1, 1, 1); }
+  to { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); }
+}
+
+/* ========== Bounce ========== */
+@keyframes mk-bounceIn {
+  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
+  20% { transform: scale3d(1.1, 1.1, 1.1); }
+  40% { transform: scale3d(0.9, 0.9, 0.9); }
+  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
+  80% { transform: scale3d(0.97, 0.97, 0.97); }
+  100% { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+
+@keyframes mk-bounceOut {
+  20% { transform: scale3d(0.9, 0.9, 0.9); }
+  50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
+  100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
+}
+
+/* ========== Flip ========== */
+@keyframes mk-flipInX {
+  from { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); }
+  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); }
+  60% { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); }
+  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
+  to { transform: perspective(400px); }
+}
+
+@keyframes mk-flipInY {
+  from { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); }
+  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); }
+  60% { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
+  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
+  to { transform: perspective(400px); }
+}
+
+/* ========== Shake ========== */
+@keyframes mk-shake {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  10%, 30%, 50%, 70%, 90% { transform: translate3d(-8px, 0, 0); }
+  20%, 40%, 60%, 80% { transform: translate3d(8px, 0, 0); }
+}
+
+/* ========== Pulse ========== */
+@keyframes mk-pulse {
+  0% { transform: scale3d(1, 1, 1); }
+  50% { transform: scale3d(1.05, 1.05, 1.05); }
+  100% { transform: scale3d(1, 1, 1); }
+}
+
+/* ========== Rotate ========== */
+@keyframes mk-rotateIn {
+  from { opacity: 0; transform: rotate3d(0, 0, 1, -200deg); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+/* ========== Base animation class ========== */
+.mk-animated {
+  animation-duration: var(--mk-duration, 0.5s);
+  animation-timing-function: var(--mk-easing, ease);
+  animation-fill-mode: both;
+}
+
+.mk-animated.mk-infinite {
+  animation-iteration-count: infinite;
+}
+
+/* ========== Animation presets ========== */
+.mk-fadeIn { animation-name: mk-fadeIn; }
+.mk-fadeOut { animation-name: mk-fadeOut; }
+.mk-slideInUp { animation-name: mk-slideInUp; }
+.mk-slideInDown { animation-name: mk-slideInDown; }
+.mk-slideInLeft { animation-name: mk-slideInLeft; }
+.mk-slideInRight { animation-name: mk-slideInRight; }
+.mk-slideOutUp { animation-name: mk-slideOutUp; }
+.mk-slideOutDown { animation-name: mk-slideOutDown; }
+.mk-zoomIn { animation-name: mk-zoomIn; }
+.mk-zoomOut { animation-name: mk-zoomOut; }
+.mk-bounceIn { animation-name: mk-bounceIn; }
+.mk-bounceOut { animation-name: mk-bounceOut; }
+.mk-flipInX { animation-name: mk-flipInX; }
+.mk-flipInY { animation-name: mk-flipInY; }
+.mk-shake { animation-name: mk-shake; }
+.mk-pulse { animation-name: mk-pulse; }
+.mk-rotateIn { animation-name: mk-rotateIn; }

package/src/styles/element-plus.css

@@ -0,0 +1,174 @@
+/* ========== Element Plus 风格动画 ========== */
+
+/* ----- Fade ----- */
+@keyframes mk-fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes mk-fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes mk-fadeInLinear {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes mk-fadeOutLinear {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes mk-fadeInUp {
+  from { opacity: 0; transform: translate3d(0, 20px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-fadeOutUp {
+  from { opacity: 1; transform: translate3d(0, 0, 0); }
+  to { opacity: 0; transform: translate3d(0, -20px, 0); }
+}
+
+@keyframes mk-fadeInDown {
+  from { opacity: 0; transform: translate3d(0, -20px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-fadeOutDown {
+  from { opacity: 1; transform: translate3d(0, 0, 0); }
+  to { opacity: 0; transform: translate3d(0, 20px, 0); }
+}
+
+@keyframes mk-fadeInLeft {
+  from { opacity: 0; transform: translate3d(20px, 0, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-fadeOutLeft {
+  from { opacity: 1; transform: translate3d(0, 0, 0); }
+  to { opacity: 0; transform: translate3d(-20px, 0, 0); }
+}
+
+@keyframes mk-fadeInRight {
+  from { opacity: 0; transform: translate3d(-20px, 0, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-fadeOutRight {
+  from { opacity: 1; transform: translate3d(0, 0, 0); }
+  to { opacity: 0; transform: translate3d(20px, 0, 0); }
+}
+
+/* ----- Zoom ----- */
+@keyframes mk-zoomInCenter {
+  from { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); }
+  to { opacity: 1; transform: scale3d(1, 1, 1); }
+}
+@keyframes mk-zoomOutCenter {
+  from { opacity: 1; transform: scale3d(1, 1, 1); }
+  to { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); }
+}
+
+@keyframes mk-zoomInTop {
+  from { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); transform-origin: center top; }
+  to { opacity: 1; transform: scale3d(1, 1, 1); transform-origin: center top; }
+}
+@keyframes mk-zoomOutTop {
+  from { opacity: 1; transform: scale3d(1, 1, 1); transform-origin: center top; }
+  to { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); transform-origin: center top; }
+}
+
+@keyframes mk-zoomInBottom {
+  from { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); transform-origin: center bottom; }
+  to { opacity: 1; transform: scale3d(1, 1, 1); transform-origin: center bottom; }
+}
+@keyframes mk-zoomOutBottom {
+  from { opacity: 1; transform: scale3d(1, 1, 1); transform-origin: center bottom; }
+  to { opacity: 0; transform: scale3d(0.7, 0.7, 0.7); transform-origin: center bottom; }
+}
+
+/* ----- Slide (for Drawer / Modal) ----- */
+@keyframes mk-slideInRight {
+  from { transform: translate3d(100%, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-slideOutRight {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(100%, 0, 0); }
+}
+
+@keyframes mk-slideInLeft {
+  from { transform: translate3d(-100%, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-slideOutLeft {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(-100%, 0, 0); }
+}
+
+@keyframes mk-slideInTop {
+  from { transform: translate3d(0, -100%, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-slideOutTop {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(0, -100%, 0); }
+}
+
+@keyframes mk-slideInBottom {
+  from { transform: translate3d(0, 100%, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes mk-slideOutBottom {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(0, 100%, 0); }
+}
+
+/* ----- List stagger ----- */
+@keyframes mk-listItemIn {
+  from { opacity: 0; transform: translate3d(0, 16px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+/* ----- Spinner ----- */
+@keyframes mk-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* ----- Base class ----- */
+.mk-transition {
+  animation-duration: var(--mk-duration, 0.3s);
+  animation-timing-function: var(--mk-easing, ease-in-out);
+  animation-fill-mode: both;
+}
+
+/* ----- Preset classes ----- */
+.mk-fade-in { animation-name: mk-fadeIn; }
+.mk-fade-out { animation-name: mk-fadeOut; }
+.mk-fade-in-linear { animation-name: mk-fadeInLinear; }
+.mk-fade-out-linear { animation-name: mk-fadeOutLinear; }
+.mk-fade-in-up { animation-name: mk-fadeInUp; }
+.mk-fade-out-up { animation-name: mk-fadeOutUp; }
+.mk-fade-in-down { animation-name: mk-fadeInDown; }
+.mk-fade-out-down { animation-name: mk-fadeOutDown; }
+.mk-fade-in-left { animation-name: mk-fadeInLeft; }
+.mk-fade-out-left { animation-name: mk-fadeOutLeft; }
+.mk-fade-in-right { animation-name: mk-fadeInRight; }
+.mk-fade-out-right { animation-name: mk-fadeOutRight; }
+
+.mk-zoom-in-center { animation-name: mk-zoomInCenter; }
+.mk-zoom-out-center { animation-name: mk-zoomOutCenter; }
+.mk-zoom-in-top { animation-name: mk-zoomInTop; }
+.mk-zoom-out-top { animation-name: mk-zoomOutTop; }
+.mk-zoom-in-bottom { animation-name: mk-zoomInBottom; }
+.mk-zoom-out-bottom { animation-name: mk-zoomOutBottom; }
+
+.mk-slide-in-right { animation-name: mk-slideInRight; }
+.mk-slide-out-right { animation-name: mk-slideOutRight; }
+.mk-slide-in-left { animation-name: mk-slideInLeft; }
+.mk-slide-out-left { animation-name: mk-slideOutLeft; }
+.mk-slide-in-top { animation-name: mk-slideInTop; }
+.mk-slide-out-top { animation-name: mk-slideOutTop; }
+.mk-slide-in-bottom { animation-name: mk-slideInBottom; }
+.mk-slide-out-bottom { animation-name: mk-slideOutBottom; }
+
+.mk-list-item-in { animation-name: mk-listItemIn; }
+
+.mk-spin { animation: mk-spin 1s linear infinite; }