meri-design-dev/custom/theme/Shake.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-shake
  display: inline-block

.p-shake-activate
  animation: shake 1.8s infinite ease-in-out

@keyframes shake
  0%
    transform: rotate(0)
  5%
    transform: rotate(2deg)
  10%
    transform: rotate(-2deg)
  15%
    transform: rotate(4deg)
  20%
    transform: rotate(-4deg)
  25%
    transform: rotate(6deg)
  30%
    transform: rotate(-6deg)
  35%
    transform: rotate(8deg)
  40%
    transform: rotate(-8deg)
  45%
    transform: rotate(10deg)
  50%
    transform: rotate(-10deg)
  55%
    transform: rotate(10deg)
  60%
    transform: rotate(-10deg)
  65%
    transform: rotate(8deg)
  70%
    transform: rotate(-8deg)
  75%
    transform: rotate(6deg)
  80%
    transform: rotate(-6deg)
  85%
    transform: rotate(4deg)
  90%
    transform: rotate(-4deg)
  95%
    transform: rotate(2deg)
  100%
    transform: rotate(-2deg)
@keyframes shake
  0%
    transform: rotate(0)
  5%
    transform: rotate(2deg)
  10%
    transform: rotate(-2deg)
  15%
    transform: rotate(4deg)
  20%
    transform: rotate(-4deg)
  25%
    transform: rotate(6deg)
  30%
    transform: rotate(-6deg)
  35%
    transform: rotate(8deg)
  40%
    transform: rotate(-8deg)
  45%
    transform: rotate(10deg)
  50%
    transform: rotate(-10deg)
  55%
    transform: rotate(10deg)
  60%
    transform: rotate(-10deg)
  65%
    transform: rotate(8deg)
  70%
    transform: rotate(-8deg)
  75%
    transform: rotate(6deg)
  80%
    transform: rotate(-6deg)
  85%
    transform: rotate(4deg)
  90%
    transform: rotate(-4deg)
  95%
    transform: rotate(2deg)
  100%
    transform: rotate(-2deg)
@keyframes shake
  0%
    transform: rotate(0)
  5%
    transform: rotate(2deg)
  10%
    transform: rotate(-2deg)
  15%
    transform: rotate(4deg)
  20%
    transform: rotate(-4deg)
  25%
    transform: rotate(6deg)
  30%
    transform: rotate(-6deg)
  35%
    transform: rotate(8deg)
  40%
    transform: rotate(-8deg)
  45%
    transform: rotate(10deg)
  50%
    transform: rotate(-10deg)
  55%
    transform: rotate(10deg)
  60%
    transform: rotate(-10deg)
  65%
    transform: rotate(8deg)
  70%
    transform: rotate(-8deg)
  75%
    transform: rotate(6deg)
  80%
    transform: rotate(-6deg)
  85%
    transform: rotate(4deg)
  90%
    transform: rotate(-4deg)
  95%
    transform: rotate(2deg)
  100%
    transform: rotate(-2deg)
@keyframes shake
  0%
    transform: rotate(0)
  5%
    transform: rotate(2deg)
  10%
    transform: rotate(-2deg)
  15%
    transform: rotate(4deg)
  20%
    transform: rotate(-4deg)
  25%
    transform: rotate(6deg)
  30%
    transform: rotate(-6deg)
  35%
    transform: rotate(8deg)
  40%
    transform: rotate(-8deg)
  45%
    transform: rotate(10deg)
  50%
    transform: rotate(-10deg)
  55%
    transform: rotate(10deg)
  60%
    transform: rotate(-10deg)
  65%
    transform: rotate(8deg)
  70%
    transform: rotate(-8deg)
  75%
    transform: rotate(6deg)
  80%
    transform: rotate(-6deg)
  85%
    transform: rotate(4deg)
  90%
    transform: rotate(-4deg)
  95%
    transform: rotate(2deg)
  100%
    transform: rotate(-2deg)