@charset "UTF-8";

/* フワフワ */
/* animation: fuwafuwa 3s ease-in-out infinite alternate; */
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

/* フワ2 */
/* animation: fuwa_float 4s ease-in-out infinite; */
@keyframes fuwa_float {
  0%, 100% {
    transform: translateY(-10%);
  }
  50% {
    transform: translateY(10%);
  }
}

/* 左右に揺れる */
/* animation: float 3s ease-in-out infinite; */
@keyframes float {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 上下にジャンプ */
/* animation: jump 1s ease-in-out infinite; */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


/* ポップ風 */
/* animation: popIn 0.5s ease-out, wiggle 3s ease-in-out infinite; */
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(3deg); }
  30%  { transform: rotate(-3deg); }
  45%  { transform: rotate(2deg); }
  60%  { transform: rotate(-2deg); }
  75%  { transform: rotate(1deg); }
  90%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* ピコピコ */
/* animation: pikopiko 1s steps(2, start) infinite; */
@keyframes pikopiko {
  0% {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

/* もちもち */
/* animation: mochimochi 1s infinite; */
@keyframes mochimochi {
  0% {
    transform: scale(1, 0.8);
  }
  20% {
    transform: scale(0.8, 1.1);
  }
  90% {
    transform: scale(1, 1);
  }
}

/* ぽよぽよ */
/* animation: poyopoyo 2s ease-out infinite; */
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

/* 反転 */
/* animation: flip 2s ease-in-out infinite; */
@keyframes flip {
  from { 
    transform: rotateY(0);
  }
  to { 
    transform: rotateY(360deg);
  }
}

/* 反転 ゆっくり */
/* animation: flip_slow 2s ease-in-out infinite; */
@keyframes flip_slow {
  0% {
    transform: rotateY(0);
  }
  20% {
    transform: rotateY(0); /* 表面で少し止まる */
  }
  50% {
    transform: rotateY(180deg);
  }
  80% {
    transform: rotateY(180deg); /* 裏面で少し止まる */
  }
  100% {
    transform: rotateY(0);
  }
}




/* 点滅 */
/* animation: blink 3s ease-in-out infinite; */
@keyframes blink {
  0%,100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.2;
  }
}


/* スイング */
/* animation: swing 3s ease-in-out infinite; */
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* スライド右から */
/* animation: slideInR 3s ease-in-out infinite; */
@keyframes slideInR {
  from { 
    transform: translateX(200%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
  }
}

/* スライド　左から */
/* animation: slideInL 3s ease-in-out infinite; */
@keyframes slideInL {
  from { 
    transform: translateX(0%);
    opacity: 0;
  }
  to { 
    transform: translateX(100%);
    opacity: 1; 
  }
}