/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/

@keyframes bounce {
    from    {
		transform:translate(0, 0);
    	}
    16.6% {
    	transform:translate(0, -20px); animation-timing-function:ease-in;
    	}
    33.3% {
    	transform:translate(0, 0);
    	}
    49.8% {
    	transform:translate(0, -14px); animation-timing-function:ease-in;
    	}
    66.4% {
    	transform:translate(0, 0);
    	}
    83%   {
    	transform:translate(0, -4px); animation-timing-function:ease-in;
    	}
    100%  {
    	transform:translate(0, 0);
    	}
}


@keyframes key1 {
	from {
		box-shadow: 0 0 0 0 #fff;
		}
	50% {
		box-shadow: 0 0 20px -10px var(--key-color050);
		}
	100% {
		box-shadow: 0 0 0 0 #fff;
		}
}

@keyframes effect_animation {
    from {
        transform: scaleX(1);
    	}
    100% {
        transform: scaleX(1) translateX(100%);
        }
}


@keyframes fadeIn {
    from {
    	transform: translateY(10%); opacity: 0;
    	}
    100% {
    	transform: translateY(0%); opacity: 1;
    	}
}

@keyframes Down {
    from {
    	transform: translateY(-10%); opacity: 0;
    	}
    100% {
    	transform: translateY(0%); opacity: 1;
    	}
}

@keyframes Right {
    from {
    	transform: translateX(10%); opacity: 0;
    	}
    100% {
    	transform: translateX(0%); opacity: 1;
    	}
}

/*   https://www.legit.co.jp/css_active/14944 */
@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes mochimochiC {
  0% {
    transform: scale(1.0, 1.0) rotate(-1deg);
  }
  5% {
    transform: scale(1.1, 1.1) rotate(-1deg);
  }
  15% {
    transform: scale(1, 1) rotate(-1deg);
  }
  100% {
    transform: scale(1, 1) rotate(-1deg);
  }
}


@keyframes mochimochiORIG {
  0% {
    transform: scale(1, 0.97) rotate(-1deg);
  }
  20% {
    transform: scale(0.97, 1.03) rotate(-1deg);
  }
  90% {
    transform: scale(1, 1) rotate(-1deg);
  }
  100% {
    transform: scale(1, 0.97) rotate(-1deg);
  }
}

@keyframes mochimochiZZ {
  0% {
    transform: scale(1, 0.98) rotate(-1deg);
  }
  20% {
    transform: scale(0.98, 1.02) rotate(-1deg);
  }
  50% {
    transform: scale(1, 1) rotate(-1deg);
  }
  100% {
    transform: scale(1, 0.98) rotate(-1deg);
  }
}

@keyframes mochimochi {
  0% {
    transform: scale(1, 1) rotate(-1deg);
  }
  25% {
    transform: scale(0.99, 1.01) rotate(-1deg);
  }
  60% {
    transform: scale(1, 1) rotate(-1deg);
  }
  100% {
    transform: scale(1.01, 0.99) rotate(-1deg);
  }
}


@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}



@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}



@keyframes yureru-js {
    0% {
        transform: translate(1px, 1px);
    }
    25% {
        transform: translate(1px, -1px);
    }
    50% {
        transform: translate(-1px, -1px);
    }
    75% {
        transform: translate(-1px, 1px);
    }
    100% {
        transform: translate(1px, 1px);
    }
}




/* https://ics.media/entry/11336/  */
@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

@keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}