/* 
delay	延迟
duration	动画时长
animationName	slideIn / fade / zoom / rotate
direction	Up / Down / Left / Right / In
infinite	1 = 循环
stagger	队列组名
stagger-step	队列间隔
<h2>Slide</h2>
<div class="section">
<div class="box" smanim='{"animationName":"slideIn","direction":"Up"}'>slide Up</div>
<div class="box" smanim='{"animationName":"slideIn","direction":"Down"}'>slide Down</div>
<div class="box" smanim='{"animationName":"slideIn","direction":"Left"}'>slide Left</div>
<div class="box" smanim='{"animationName":"slideIn","direction":"Right"}'>slide Right</div>
</div>

<h2>Fade</h2>
<div class="section">
<div class="box" smanim='{"animationName":"fade","direction":"Up"}'>fade Up</div>
<div class="box" smanim='{"animationName":"fade","direction":"Left"}'>fade Left</div>
</div>

<h2>Zoom</h2>
<div class="section">
<div class="box" smanim='{"animationName":"zoom","direction":"In"}'>zoom In</div>
<div class="box" smanim='{"animationName":"zoom","direction":"Right"}'>zoom Right</div>
</div>

<h2>Rotate</h2>
<div class="section">
<div class="box" smanim='{"animationName":"rotate","direction":"In"}'>rotate In</div>
<div class="box" smanim='{"animationName":"rotate","direction":"Left"}'>rotate Left</div>
</div>

<h2>Infinite</h2>
<div class="section">
<div class="box" smanim='{"animationName":"slideIn","direction":"Up","infinite":"1"}'>Infinite</div>
</div>

<h2>Stagger</h2>
<div class="section">
<div class="box" smanim='{"animationName":"fade","direction":"Up"}' stagger="cards">Item 1</div>
<div class="box" smanim='{"animationName":"fade","direction":"Up"}' stagger="cards">Item 2</div>
<div class="box" smanim='{"animationName":"fade","direction":"Up"}' stagger="cards">Item 3</div>
</div> 
<div class="box"
smanim='{"animationName":"pulse","direction":"In","duration":1.2,"infinite":"1"}'>
❤️ 心跳
</div>
/* 默认隐藏 */
[smanim] {
  opacity: 0
}

/* ================= SLIDE ================= */

@keyframes slideInUp {
  from {
    transform: translateY(40px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-40px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-40px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(40px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

/* ================= FADE ================= */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ================= ZOOM ================= */

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(.6)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes zoomUp {
  from {
    opacity: 0;
    transform: scale(.6) translateY(30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes zoomLeft {
  from {
    opacity: 0;
    transform: scale(.6) translateX(-30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes zoomRight {
  from {
    opacity: 0;
    transform: scale(.6) translateX(30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ================= ROTATE ================= */

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(.5)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes rotateLeft {
  from {
    opacity: 0;
    transform: rotate(-90deg) translateX(-40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes rotateRight {
  from {
    opacity: 0;
    transform: rotate(90deg) translateX(40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes rotateUp {
  from {
    opacity: 0;
    transform: rotate(-90deg) translateY(40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}


@keyframes pulseIn{
  0%{
    transform:scale(1);
  }
  30%{
    transform:scale(.95);
  }
  60%{
    transform:scale(1.05);
  }
  100%{
    transform:scale(1);
  }
}