@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
/**
* cssanimation.css
* Current Version: 1.0.3
* https://www.cssanimatio.io
* Created and maintained by: Pavel
* Find me at: https://www.linkedin.com/in/yesiamrocks/
* Email: hello@cssanimation.io
* Github: https://github.com/yesiamrocks/cssanimation.io
* Title: A CSS Animation Library for Developers and Ninjas
* Copyright (c) 2017 Pavel
* License: cssanimation.io is licensed under the MIT license
**/
.open, .wipe {
margin: 0 auto;
overflow: hidden;
}
.open, .typing, .wipe {
overflow: hidden;
}
.cssanimation, .cssanimation span {
animation-duration: 1s;
animation-fill-mode: both;
}
.cssanimation span {
display: inline-block;
}
.infinite {
animation-iteration-count: infinite !important;
}
.hu__hu__ {
animation: hu__hu__ infinite 2s ease-in-out;
}
@keyframes hu__hu__ {
50% {
transform: translateY(30px);
}
}
.leSnake span {
animation: leSnake 1.5s ease-in-out;
animation-iteration-count: infinite;
}
@keyframes leSnake {
from, to {
transform: translateY(0);
}
50% {
transform: translateY(30px);
}
}
.lePeek span {
animation-name: lePeek;
}
@keyframes lePeek {
25% {
transform: rotateX(30deg) translateY(10px) rotate(-13deg);
}
50% {
transform: translateY(-22px) rotate(3deg) scale(1.1);
}
}
.effect3d {
animation-name: effect3d;
}
@keyframes effect3d {
to {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
}
.leRainDrop span {
animation-name: leRainDrop;
animation-iteration-count: infinite;
}
@keyframes leRainDrop {
0%, 100%, 25%, 55%, 75%, 87%, 97% {
transform: scaleX(1);
}
26%, 56%, 76% {
transform: scaleX(1.3) scaleY(0.8);
}
31%, 61%, 81% {
transform: scaleX(0.8) scaleY(1.2);
}
76%, 88% {
transform: scaleX(1.2);
}
98% {
transform: scaleX(1.1);
}
}
.pepe {
animation-name: pepe;
animation-iteration-count: infinite;
}
@keyframes pepe {
33%, 66%, from, to {
transform: rotate(4deg);
}
16%, 50%, 83% {
transform: rotate(-4deg);
}
}
.leWaterWave span {
animation: leWaterWave 0.2s linear infinite;
}
@keyframes leWaterWave {
50% {
transform: skewY(1deg) skewX(-1deg) scale(1.06);
}
}
.lightning {
animation-name: lightning;
}
@keyframes lightning {
50%, from, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.leJoltZoom span {
animation-name: leJoltZoom;
}
@keyframes leJoltZoom {
10% {
font-size: 140%;
}
40% {
font-size: 80%;
}
100% {
font-size: 100%;
}
}
.typing {
width: 473px;
white-space: nowrap;
border-right: 2px solid #7E2EA0;
animation: typing 2s steps(12, end), cursor 0.2s steps(12, end) infinite;
}
.electricity, .leSkateX span {
-webkit-animation-iteration-count: infinite;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
.electricity {
animation-name: electricity;
animation-iteration-count: infinite;
}
@keyframes electricity {
37%, 48%, 67%, 72%, 80%, 85%, 93%, 96%, from {
transform: translateY(30px);
}
12%, 20%, 28%, 4%, 52%, 56%, 60%, 64%, 88% {
transform: translateY(10px);
}
16%, 24%, 32%, 40%, 44%, 8% {
transform: translateY(5px);
}
76%, to {
transform: translateY(40px);
}
}
.wipe {
width: 473px;
display: inline-flex;
animation-name: wipe;
}
@keyframes wipe {
to {
width: 0;
}
}
.open {
width: 473px;
display: inline-flex;
animation-name: open;
}
@keyframes open {
from {
width: 0;
}
}
.leMagnify span {
animation-name: leMagnify;
}
@keyframes leMagnify {
50% {
transform: scale(1.8);
letter-spacing: 26px;
}
}
.leBeat span {
animation-name: leBeat;
}
@keyframes leBeat {
14%, 42% {
transform: scale(1.3);
}
28%, 70% {
transform: scale(1);
}
}
.leFadeIn span {
animation-name: leFadeIn;
}
@keyframes leFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.leFadeInLeft span {
animation-name: leFadeInLeft;
}
@keyframes leFadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
}
}
.leFadeInRight span {
animation-name: leFadeInRight;
}
@keyframes leFadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
}
}
.leFadeInTop span {
animation-name: leFadeInTop;
}
@keyframes leFadeInTop {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
}
}
.leFadeInBottom span {
animation-name: leFadeInBottom;
}
@keyframes leFadeInBottom {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
}
}
.leFadeOut span {
animation-name: leFadeOut;
}
@keyframes leFadeOut {
to {
opacity: 0;
}
}
.leFadeOutLeft span {
animation-name: leFadeOutLeft;
}
@keyframes leFadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(-60px);
}
}
.leFadeOutRight span {
animation-name: leFadeOutRight;
}
@keyframes leFadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(60px);
}
}
.leFadeOutTop span {
animation-name: leFadeOutTop;
}
@keyframes leFadeOutTop {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
.leFadeOutBottom span {
animation-name: leFadeOutBottom;
}
@keyframes leFadeOutBottom {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(100%);
}
}
.leMovingBackFromRight span {
animation-name: leMovingBackFromRight;
transform-origin: bottom;
}
@keyframes leMovingBackFromRight {
40% {
transform: rotate(45deg);
}
100% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
}
}
.leMovingBackFromLeft span {
animation-name: leMovingBackFromLeft;
transform-origin: bottom;
}
@keyframes leMovingBackFromLeft {
40% {
transform: rotate(-45deg);
}
100% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
}
}
.leKickOutBehind span {
animation-name: leKickOutFront;
transform-origin: top;
}
@keyframes leKickOutFront {
40% {
transform: rotate(45deg);
}
100% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
}
}
.leKickOutFront span {
animation-name: leKickOutBehind;
transform-origin: top;
}
@keyframes leKickOutBehind {
40% {
transform: rotate(-45deg);
}
100% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1.45);
}
}
.leSkateX span {
animation-name: leScaleX;
animation-iteration-count: infinite;
}
.leSkateXY span, .leSkateY span {
-webkit-animation-iteration-count: infinite;
}
@keyframes leScaleX {
50% {
transform: scaleX(0.4);
}
}
.leSkateY span {
animation-name: leSkateY;
animation-iteration-count: infinite;
}
@keyframes leSkateY {
50% {
transform: scaleY(0.4);
}
}
.leSkateXY span {
animation-name: leSkateXY;
animation-iteration-count: infinite;
animation-duration: 1.5s;
}
@keyframes leSkateXY {
25% {
transform: scale3d(1, 0.4, 0);
}
50% {
transform: scale3d(0.4, 0.4, 1);
}
75% {
transform: scale3d(0.4, 1, 1);
}
}
.leScaleXIn span {
animation-name: leScaleXIn;
}
@keyframes leScaleXIn {
from {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
50% {
opacity: 1;
}
}
.leScaleXOut span {
animation-name: leScaleXOut;
}
@keyframes leScaleXOut {
to {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
from {
opacity: 1;
}
}
.leScaleYIn span {
animation-name: leScaleYIn;
}
@keyframes leScaleYIn {
from {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
50% {
opacity: 1;
}
}
.leScaleYOut span {
animation-name: leScaleYOut;
}
@keyframes leScaleYOut {
to {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
from {
opacity: 1;
}
}
.leJump span {
animation-name: leJump;
animation-iteration-count: infinite;
}
@keyframes leJump {
to {
transform: translateY(-20px);
}
}
.leAboundTop span {
animation-name: leAboundTop;
}
@keyframes leAboundTop {
50% {
transform: translateY(-100px);
animation-timing-function: ease-in;
}
}
.leAboundBottom span {
animation-name: leAboundBottom;
}
@keyframes leAboundBottom {
50% {
transform: translateY(100px);
animation-timing-function: ease-in;
}
}
.leAboundLeft span {
animation-name: leAboundLeft;
}
@keyframes leAboundLeft {
50% {
transform: translateX(-100px);
animation-timing-function: ease-in;
}
}
.leAboundRight span {
animation-name: leAboundRight;
}
@keyframes leAboundRight {
50% {
transform: translateX(100px);
animation-timing-function: ease-in;
}
}
.leFlyInTop span {
animation-name: leFlyInTop;
}
@keyframes leFlyInTop {
0% {
transform: translate(0, -80px);
opacity: 0;
}
50% {
transform: translate(10px, 50px);
animation-timing-function: ease-in-out;
}
}
.leFlyInLeft span {
animation-name: leFlyInLeft;
animation-timing-function: ease-in-out;
}
.leFlyInRight span, .leFlyOutLeft span {
-webkit-animation-timing-function: ease-in-out;
}
@keyframes leFlyInLeft {
0% {
transform: translate(-40px, 0);
opacity: 0;
}
50% {
transform: translate(40px, 0);
}
}
.leFlyInRight span {
animation-name: leFlyInRight;
animation-timing-function: ease-in-out;
}
@keyframes leFlyInRight {
0% {
transform: translate(40px, 0);
opacity: 0;
}
50% {
transform: translate(-40px, 0);
}
}
.leFlyInBottom span {
animation-name: leFlyInBottom;
}
@keyframes leFlyInBottom {
0% {
transform: translate(0, 80px);
opacity: 0;
}
50% {
transform: translate(10px, -50px);
animation-timing-function: ease-in-out;
}
}
.leFlyOutTop span {
animation-name: leFlyOutTop;
}
@keyframes leFlyOutTop {
50% {
transform: translate(0, 50px);
}
to {
transform: translate(0, -100px);
opacity: 0;
}
}
.leFlyOutLeft span {
animation-name: leFlyOutLeft;
animation-timing-function: ease-in-out;
}
@keyframes leFlyOutLeft {
50% {
transform: translate(40px, 0);
}
to {
transform: translate(-100px, 0);
opacity: 0;
}
}
.leFlyOutRight span {
animation-name: leFlyOutRight;
animation-timing-function: ease-in-out;
}
@keyframes leFlyOutRight {
50% {
transform: translate(-40px, 0);
}
to {
transform: translate(100px, 0);
opacity: 0;
}
}
.leFlyOutBottom span {
animation-name: leFlyOutBottom;
}
@keyframes leFlyOutBottom {
50% {
transform: translate(0, -40px);
}
to {
transform: translate(0, 100px);
opacity: 0;
}
}
.leDoorCloseLeft span {
animation-name: leDoorCloseLeft;
}
@keyframes leDoorCloseLeft {
from, to {
transform: perspective(400px);
transform-origin: left;
}
from {
transform: rotateY(90deg);
opacity: 0;
}
to {
opacity: 1;
}
}
.leDoorOpenRight span {
animation-name: leDoorOpenRight;
}
@keyframes leDoorOpenRight {
from, to {
transform: perspective(400px);
transform-origin: left;
}
to {
transform: rotateY(90deg);
opacity: 0;
}
}
.leDoorCloseRight span {
animation-name: leDoorCloseRight;
}
@keyframes leDoorCloseRight {
from, to {
transform: perspective(400px);
transform-origin: right;
}
from {
transform: rotateY(-90deg);
opacity: 0;
}
to {
opacity: 1;
}
}
.leDoorOpenLeft span {
animation-name: leDoorOpenLeft;
}
@keyframes leDoorOpenLeft {
from, to {
transform: perspective(400px);
transform-origin: right;
}
to {
transform: rotateY(-90deg);
opacity: 0;
}
}
.leHangAndDropLeft span {
animation-name: leHangAndDropLeft;
}
@keyframes leHangAndDropLeft {
from {
transform-origin: left;
}
50% {
transform: rotate(100deg);
transform-origin: left;
}
60% {
transform: rotate(90deg);
transform-origin: left;
}
to {
transform: translateY(800px) rotate(70deg);
transform-origin: left;
}
}
.leHangAndDropRight span {
animation-name: leHangAndDropRight;
}
@keyframes leHangAndDropRight {
from {
transform-origin: right;
}
50% {
transform: rotate(-100deg);
transform-origin: right;
}
60% {
transform: rotate(-90deg);
transform-origin: right;
}
to {
transform: translateY(800px) rotate(-70deg);
transform-origin: right;
}
}
.leRencontre span {
animation: leRencontre 0.4s;
animation-iteration-count: infinite;
}
.leHorizontalShake span, .lePulseShake span {
-webkit-animation-iteration-count: infinite;
}
@keyframes leRencontre {
0%, 100%, 33% {
transform-origin: bottom;
animation-timing-function: cubic-bezier(0.17, 0.67, 0.79, 1.83);
}
33% {
transform: translateY(-2px) rotate(-3deg);
}
66% {
transform: translateY(2px) rotate(3deg);
}
}
.lePulseShake span {
animation-name: lePulseShake;
animation-iteration-count: infinite;
}
@keyframes lePulseShake {
90% {
transform: scale(1);
}
92% {
transform: scale(1.2);
}
96% {
transform: scale(1, 1);
}
98% {
transform: scale(1.1);
}
}
.leHorizontalShake span {
animation-name: leHorizontalShake;
animation-iteration-count: infinite;
}
.leMadMax span, .leVerticalShake span {
-webkit-animation-iteration-count: infinite;
}
@keyframes leHorizontalShake {
12%, 21%, 3%, 30%, 39%, 48%, 57%, 65%, 74%, 92% {
transform: translateX(5px);
}
15%, 24%, 33%, 42%, 51%, 6%, 60%, 68%, 77%, 86%, 95% {
transform: translateX(3px);
}
18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 9%, 98% {
transform: translateX(-5px);
}
}
.leVerticalShake span {
animation-name: leVerticalShake;
animation-iteration-count: infinite;
}
@keyframes leVerticalShake {
12%, 21%, 3%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% {
transform: translateY(5px);
}
15%, 24%, 33%, 42%, 51%, 6%, 60%, 68%, 77%, 86%, 95% {
transform: translateY(3px);
}
18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 9%, 98% {
transform: translateY(-5px);
}
}
.leMadMax span {
animation-name: leMadMax;
animation-iteration-count: infinite;
}
@keyframes leMadMax {
12%, 21%, 3%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% {
transform: translateY(5px) scale(1.1);
}
15%, 24%, 33%, 42%, 51%, 6%, 60%, 68%, 77%, 86%, 95% {
transform: translateY(3px) scale(0.8);
}
18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 9%, 98% {
transform: translateY(-5px) scale(1.1);
}
}
.leHorizontalTremble span {
animation-name: leHorizontalTremble;
animation-iteration-count: infinite;
}
@keyframes leHorizontalTremble {
21%, 3%, 39%, 57%, 74%, 92% {
transform: translateX(5px);
}
24%, 42%, 6%, 60%, 77%, 95% {
transform: translateX(3px);
}
27%, 45%, 63%, 80%, 9%, 98% {
transform: translateX(-5px);
}
}
.leVerticalTremble span {
animation-name: leVerticalTremble;
animation-iteration-count: infinite;
}
@keyframes leVerticalTremble {
21%, 3%, 39%, 57%, 74%, 92% {
transform: translateY(5px);
}
24%, 42%, 6%, 60%, 77%, 95% {
transform: translateY(3px);
}
27%, 45%, 63%, 80%, 9%, 98% {
transform: translateY(-5px);
}
}
.leCrazyCool span {
animation-name: leCrazyCool;
animation-iteration-count: infinite;
}
@keyframes leCrazyCool {
21%, 3%, 39%, 57%, 74%, 92% {
transform: translateY(5px) scale(1.1);
}
24%, 42%, 6%, 60%, 77%, 95% {
transform: translateY(3px) scale(0.8);
}
27%, 45%, 63%, 80%, 9%, 98% {
transform: translateY(-5px) scale(1.1);
}
}
.leVibration span {
animation: leVibration 0.1s linear infinite;
}
.heartbeatFast, .heartbeatSlow {
-webkit-animation-iteration-count: infinite;
}
@keyframes leVibration {
50% {
transform: skewY(1deg) skewX(-1deg) scale(1.06);
}
}
.lePushReleaseFrom span {
animation-name: lePushReleaseFrom;
}
@keyframes lePushReleaseFrom {
from {
transform: scale(3, 3);
opacity: 0;
}
50% {
transform: scale(0.5, 0.5);
}
}
.lePushReleaseFromLeft span {
animation-name: lePushReleaseFromLeft;
}
@keyframes lePushReleaseFromLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
30% {
transform: translateX(100px);
}
}
.lePushReleaseFromTop span {
animation-name: lePushReleaseFromTop;
}
@keyframes lePushReleaseFromTop {
from {
transform: translateY(-100%);
opacity: 0;
}
30% {
transform: translateY(100px);
}
}
.lePushReleaseFromBottom span {
animation-name: lePushReleaseFromBottom;
}
@keyframes lePushReleaseFromBottom {
from {
transform: translateY(100%);
opacity: 0;
}
30% {
transform: translateY(-100px);
}
}
.lePushReleaseTo span {
animation-name: lePushReleaseTo;
}
@keyframes lePushReleaseTo {
30% {
transform: scale(0.5, 0.5);
}
to {
transform: scale(5, 5);
opacity: 0;
}
}
.lePushReleaseToTop span {
animation-name: lePushReleaseToTop;
}
@keyframes lePushReleaseToTop {
30% {
transform: translateY(100px);
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
.lePushReleaseToBottom span {
animation-name: lePushReleaseToBottom;
}
@keyframes lePushReleaseToBottom {
30% {
transform: translateY(-100px);
}
to {
transform: translateY(100%);
opacity: 0;
}
}
.leFlipInTop span {
animation-name: leFlipInTop;
}
@keyframes leFlipInTop {
from {
transform: perspective(600px);
opacity: 0;
}
30% {
transform: perspective(600px) rotateX(180deg);
transform-origin: 0 0;
animation-timing-function: ease-out;
}
to {
transform: perspective(600px);
}
}
.leFlipOutTop span {
animation-name: leFlipOutTop;
}
@keyframes leFlipOutTop {
70% {
transform: perspective(600px) rotateX(180deg);
transform-origin: 0 0;
animation-timing-function: ease-out;
}
to {
opacity: 0;
transform: perspective(600px);
}
}
.leFlipInBottom span {
animation-name: leFlipInBottom;
}
@keyframes leFlipInBottom {
from {
transform: perspective(600px);
opacity: 0;
}
30% {
transform: perspective(600px) rotateX(180deg);
transform-origin: bottom;
animation-timing-function: ease-out;
}
to {
transform: perspective(600px);
}
}
.leFlipOutBottom span {
animation-name: leFlipOutBottom;
}
@keyframes leFlipOutBottom {
70% {
transform: perspective(600px) rotateX(180deg);
transform-origin: bottom;
animation-timing-function: ease-out;
}
to {
opacity: 0;
transform: perspective(600px);
}
}
.leElevateLeft span {
animation-name: leElevateLeft;
}
@keyframes leElevateLeft {
from {
transform: translateY(100%) rotate(-20deg);
transform-origin: right;
opacity: 0;
}
40% {
transform: rotate(20deg);
transform-origin: right;
}
65% {
transform: rotate(0);
transform-origin: right;
}
}
.leElevateRight span {
animation-name: leElevateRight;
}
@keyframes leElevateRight {
from {
transform: translateY(100%) rotate(20deg);
transform-origin: left;
opacity: 0;
}
40% {
transform: rotate(-20deg);
transform-origin: left;
}
65% {
transform: rotate(0);
transform-origin: left;
}
}
.leRollFromLeft span {
animation-name: leRollFromLeft;
}
@keyframes leRollFromLeft {
from {
transform: translateX(-60px) perspective(600px) rotateY(180deg);
opacity: 0;
}
}
.leRollFromRight span {
animation-name: leRollFromRight;
}
@keyframes leRollFromRight {
from {
transform: translateX(60px) perspective(600px) rotateY(-180deg);
opacity: 0;
}
}
.leRollFromTop span {
animation-name: leRollFromTop;
}
@keyframes leRollFromTop {
from {
transform: translateY(-60px) perspective(600px) rotateX(180deg);
opacity: 0;
}
}
.leRollFromBottom span {
animation-name: leRollFromBottom;
}
@keyframes leRollFromBottom {
from {
transform: translateY(60px) perspective(600px) rotateX(-180deg);
opacity: 0;
}
}
.leRollToLeft span {
animation-name: leRollToLeft;
}
@keyframes leRollToLeft {
to {
transform: translateX(-60px) perspective(600px) rotateY(180deg);
opacity: 0;
}
}
.leRollToRight span {
animation-name: leRollToRight;
}
@keyframes leRollToRight {
to {
transform: translateX(60px) perspective(600px) rotateY(-180deg);
opacity: 0;
}
}
.leRollToTop span {
animation-name: leRollToTop;
}
@keyframes leRollToTop {
to {
transform: translateY(-60px) perspective(600px) rotateX(180deg);
opacity: 0;
}
}
.leRollToBottom span {
animation-name: leRollToBottom;
}
@keyframes leRollToBottom {
to {
transform: translateY(60px) perspective(600px) rotateX(-180deg);
opacity: 0;
}
}
.leRotateSkateInRight span {
animation-name: leRotateSkateInRight;
}
@keyframes leRotateSkateInRight {
from {
transform: scaleX(0.2) translateX(100px);
opacity: 0;
}
}
.leRotateSkateInLeft span {
animation-name: leRotateSkateInLeft;
}
@keyframes leRotateSkateInLeft {
from {
transform: scaleX(0.2) translateX(-100px);
opacity: 0;
}
}
.leRotateSkateInTop span {
animation-name: leRotateSkateInTop;
}
@keyframes leRotateSkateInTop {
from {
transform: scaleY(0.2) translateY(-100px);
opacity: 0;
}
}
.leRotateSkateInBottom span {
animation-name: leRotateSkateInBottom;
}
@keyframes leRotateSkateInBottom {
from {
transform: scaleY(0.2) translateY(100px);
opacity: 0;
}
}
.leRotateSkateOutRight span {
animation-name: leRotateSkateOutRight;
}
@keyframes leRotateSkateOutRight {
to {
transform: scaleX(0.2) translateX(100px);
opacity: 0;
}
}
.leRotateSkateOutLeft span {
animation-name: leRotateSkateOutLeft;
}
@keyframes leRotateSkateOutLeft {
to {
transform: scaleX(0.2) translateX(-100px);
opacity: 0;
}
}
.leRotateSkateOutTop span {
animation-name: leRotateSkateOutTop;
}
@keyframes leRotateSkateOutTop {
to {
transform: scaleY(0.2) translateY(-100px);
opacity: 0;
}
}
.leRotateSkateOutBottom span {
animation-name: leRotateSkateOutBottom;
}
@keyframes leRotateSkateOutBottom {
to {
transform: scaleY(0.2) translateY(100px);
opacity: 0;
}
}
.leRotateXZoomIn span {
animation-name: leRotateXZoomIn;
}
@keyframes leRotateXZoomIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
5% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg);
}
}
.leRotateXZoomOut span {
animation-name: leRotateXZoomOut;
}
@keyframes leRotateXZoomOut {
95% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg);
}
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
}
.leRotateYZoomIn span {
animation-name: leRotateYZoomIn;
}
@keyframes leRotateYZoomIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
5% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
}
}
.leRotateYZoomOut span {
animation-name: leRotateYZoomOut;
}
@keyframes leRotateYZoomOut {
95% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
}
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
}
.leRotateIn span {
animation-name: leRotateIn;
}
@keyframes leRotateIn {
from {
transform: rotate(-180deg);
opacity: 0;
}
to {
opacity: 1;
}
}
.leRotateOut span {
animation-name: leRotateOut;
}
@keyframes leRotateOut {
from {
opacity: 1;
}
to {
transform: rotate(180deg);
opacity: 0;
}
}
.leRotateInLeft span {
animation-name: leRotateInLeft;
}
@keyframes leRotateInLeft {
from {
transform: rotate(-180deg) translateX(150px);
opacity: 0;
}
to {
opacity: 1;
}
}
.leRotateOutLeft span {
animation-name: leRotateOutLeft;
}
@keyframes leRotateOutLeft {
from {
opacity: 1;
}
to {
transform: rotate(180deg) translateX(150px);
opacity: 0;
}
}
.leRotateInRight span {
animation-name: leRotateInRight;
}
@keyframes leRotateInRight {
from {
transform: rotate(-180deg) translateX(-150px);
opacity: 0;
}
to {
opacity: 1;
}
}
.leRotateOutRight span {
animation-name: leRotateOutRight;
}
@keyframes leRotateOutRight {
from {
opacity: 1;
}
to {
transform: rotate(180deg) translateX(-150px);
opacity: 0;
}
}
.leSpinInLeft span {
animation-name: leSpinInLeft;
}
@keyframes leSpinInLeft {
from, to {
transform-origin: left bottom;
}
from {
transform: rotate(90deg);
opacity: 0;
}
}
.leSpinInRight span {
animation-name: leSpinInRight;
}
@keyframes leSpinInRight {
from, to {
transform-origin: right bottom;
}
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.leSpinOutLeft span {
animation-name: leSpinOutLeft;
}
@keyframes leSpinOutLeft {
from, to {
transform-origin: left bottom;
}
to {
transform: rotate(90deg);
opacity: 0;
}
}
.leSpinOutRight span {
animation-name: leSpinOutRight;
}
@keyframes leSpinOutRight {
from, to {
transform-origin: right bottom;
}
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.leBlurIn span {
animation-name: leBlurIn;
}
@keyframes leBlurIn {
from {
transform: scaleX(0.2);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInRight span {
animation-name: leBlurInRight;
}
@keyframes leBlurInRight {
from {
transform: scaleX(0.2) translateX(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInLeft span {
animation-name: leBlurInLeft;
}
@keyframes leBlurInLeft {
from {
transform: scaleX(0.2) translateX(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInTop span {
animation-name: leBlurInTop;
}
@keyframes leBlurInTop {
from {
transform: scaleY(0.2) translateY(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurInBottom span {
animation-name: leBlurInBottom;
}
@keyframes leBlurInBottom {
from {
transform: scaleY(0.2) translateY(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOut span {
animation-name: leBlurOut;
}
@keyframes leBlurOut {
to {
transform: scaleX(0.2);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutRight span {
animation-name: leBlurOutRight;
}
@keyframes leBlurOutRight {
to {
transform: scaleX(0.2) translateX(100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutLeft span {
animation-name: leBlurOutLeft;
}
@keyframes leBlurOutLeft {
to {
transform: scaleX(0.2) translateX(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutTop span {
animation-name: leBlurOutTop;
}
@keyframes leBlurOutTop {
to {
transform: scaleY(0.2) translateY(-100px);
filter: blur(20px);
opacity: 0;
}
}
.leBlurOutBottom span {
animation-name: leBlurOutBottom;
}
@keyframes leBlurOutBottom {
to {
transform: scaleY(0.2) translateY(100px);
filter: blur(20px);
opacity: 0;
}
}
.lePopUp span {
animation-name: lePopUp;
}
@keyframes lePopUp {
50% {
transform: scale(1.5);
}
}
.lePopUpLeft span {
animation-name: lePopUpLeft;
}
@keyframes lePopUpLeft {
50% {
transform: translateX(-50px) scale(1.5);
animation-timing-function: ease-in;
}
}
.lePopUpRight span {
animation-name: lePopUpRight;
}
@keyframes lePopUpRight {
50% {
transform: translateX(50px) scale(1.5);
animation-timing-function: ease-in;
}
}
.lePopOut span {
animation-name: lePopOut;
}
@keyframes lePopOut {
50% {
transform: scale(0.5);
}
}
.lePopOutLeft span {
animation-name: lePopOutLeft;
}
@keyframes lePopOutLeft {
50% {
transform: translateX(-50px) scale(0.5);
animation-timing-function: ease-in;
}
}
.lePopOutRight span {
animation-name: lePopOutRight;
}
@keyframes lePopOutRight {
50% {
transform: translateX(50px) scale(0.5);
animation-timing-function: ease-in;
}
}
.leBounceFromTop span {
animation-name: leBounceFromTop;
}
@keyframes leBounceFromTop {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, -80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, -20px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.leBounceFromDown span {
animation-name: leBounceFromDown;
}
@keyframes leBounceFromDown {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, 20px, 0);
}
90% {
transform: translate3d(0, 4px, 0);
}
}
.leBounceY span {
animation-name: leBounceY;
}
@keyframes leBounceY {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1, 2, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1, 1.5, 1);
}
90% {
transform: scale3d(1, 1.1, 1);
}
}
.leBounceZoomIn span {
animation-name: leBounceZoomIn;
}
@keyframes leBounceZoomIn {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(1.7);
}
70% {
animation-timing-function: ease-in;
transform: scale(1.9);
}
90% {
transform: scale(1.1);
}
}
.leBounceZoomOut span {
animation-name: leBounceZoomOut;
}
@keyframes leBounceZoomOut {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(0.5);
}
70% {
animation-timing-function: ease-in;
transform: scale(0.7);
}
90% {
transform: scale(0.9);
}
}
.lePerspectiveOutTop span {
animation-name: lePerspectiveOutTop;
transform: perspective(500px);
transform-style: preserve-3d;
}
@keyframes lePerspectiveOutTop {
50% {
opacity: 1;
}
to {
transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
opacity: 0;
}
}
.lePerspectiveOutBottom span {
animation-name: lePerspectiveOutBottom;
transform: perspective(500px);
transform-style: preserve-3d;
}
@keyframes lePerspectiveOutBottom {
50% {
opacity: 1;
}
to {
transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
opacity: 0;
}
}
.leZoomIn span {
animation-name: leZoomIn;
}
@keyframes leZoomIn {
from {
transform: scale(10);
opacity: 0;
}
}
.leZoomInLeft span {
animation-name: leZoomInLeft;
}
@keyframes leZoomInLeft {
from {
transform: scale(10) translateX(-150%);
opacity: 0;
}
}
.leZoomInRight span {
animation-name: leZoomInRight;
}
@keyframes leZoomInRight {
from {
transform: scale(10) translateX(150%);
opacity: 0;
}
}
.leZoomInTop span {
animation-name: LetterZoomInTop;
}
@keyframes LetterZoomInTop {
from {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.leZoomInBottom span {
animation-name: leZoomInBottom;
}
@keyframes leZoomInBottom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
}
.leZoomOut span {
animation-name: leZoomOut;
}
@keyframes leZoomOut {
to {
transform: scale(10);
opacity: 0;
}
}
.leZoomOutLeft span {
animation-name: leZoomOutLeft;
}
@keyframes leZoomOutLeft {
to {
transform: scale(10) translateX(-150%);
opacity: 0;
}
}
.leZoomOutRight span {
animation-name: leZoomOutRight;
}
@keyframes leZoomOutRight {
to {
transform: scale(10) translateX(150%);
opacity: 0;
}
}
.leZoomOutTop span {
animation-name: leZoomOutTop;
}
@keyframes leZoomOutTop {
to {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.leZoomOutBottom span {
animation-name: leZoomOutBottom;
}
@keyframes leZoomOutBottom {
to {
transform: scale(10) translateY(50%);
opacity: 0;
}
}
.leDanceInTop span {
animation-name: leDanceInTop;
transform-origin: top;
}
@keyframes leDanceInTop {
from {
opacity: 0;
}
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
}
.leDanceInMiddle span {
animation-name: leDanceInMiddle;
}
@keyframes leDanceInMiddle {
from {
opacity: 0;
}
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
}
.leDanceInBottom span {
animation-name: leDanceInBottom;
transform-origin: bottom;
}
@keyframes leDanceInBottom {
from {
opacity: 0;
}
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
}
.leDanceOutTop span {
animation-name: leDanceOutTop;
transform-origin: top;
}
@keyframes leDanceOutTop {
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
to {
opacity: 0;
}
}
.leDanceOutMiddle span {
animation-name: leDanceOutMiddle;
}
@keyframes leDanceOutMiddle {
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
to {
opacity: 0;
}
}
.leDanceOutBottom span {
animation-name: leDanceOutBottom;
transform-origin: bottom;
}
@keyframes leDanceOutBottom {
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
to {
opacity: 0;
}
}
.oaoFadeIn span:nth-child(even) {
animation-name: leoaoFadeInTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes leoaoFadeInTop {
from {
transform: translateY(-100px);
opacity: 0;
}
}
.oaoFadeIn span:nth-child(odd) {
animation-name: leoaoFadeInBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes leoaoFadeInBottom {
from {
transform: translateY(100px);
opacity: 0;
}
}
.oaoFadeOut span:nth-child(even) {
animation-name: leoaoFadeOutop;
animation-duration: 0.7s;
animation-timing-function: ease-in;
}
@keyframes leoaoFadeOutop {
to {
transform: translateY(-100px);
opacity: 0;
}
}
.oaoFadeOut span:nth-child(odd) {
animation-name: leoaoFadeOutBottom;
animation-duration: 0.7s;
animation-timing-function: ease-in;
}
@keyframes leoaoFadeOutBottom {
to {
transform: translateY(100%);
opacity: 0;
}
}
.oaoFlyIn span:nth-child(even) {
animation-name: leoaoFlyInTop;
}
@keyframes leoaoFlyInTop {
0% {
transform: translateY(80px);
opacity: 0;
}
50% {
transform: translateY(-50px);
animation-timing-function: ease-out;
}
}
.oaoFlyIn span:nth-child(odd) {
animation-name: leoaoFlyInBottom;
}
@keyframes leoaoFlyInBottom {
0% {
transform: translateY(-80px);
opacity: 0;
}
50% {
transform: translateY(50px);
animation-timing-function: ease-out;
}
}
.oaoFlyOut span:nth-child(even) {
animation-name: leoaoFlyOutTop;
}
@keyframes leoaoFlyOutTop {
30% {
transform: translateY(80px);
animation-timing-function: ease-out;
}
80% {
transform: translateY(-50px);
animation-timing-function: ease-out;
}
to {
opacity: 0;
}
}
.oaoFlyOut span:nth-child(odd) {
animation-name: leoaoFlyOutBottom;
}
@keyframes leoaoFlyOutBottom {
30% {
transform: translateY(-80px);
animation-timing-function: ease-out;
}
80% {
transform: translateY(50px);
animation-timing-function: ease-out;
}
to {
opacity: 0;
}
}
.oaoRotateIn span:nth-child(even) {
animation-name: oaoRotateInTop;
}
@keyframes oaoRotateInTop {
from {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateIn span:nth-child(odd) {
animation-name: oaoRotateInBottom;
}
@keyframes oaoRotateInBottom {
from {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateOut span:nth-child(even) {
animation-name: oaoRotateOutTop;
}
@keyframes oaoRotateOutTop {
to {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateOut span:nth-child(odd) {
animation-name: oaoRotateOutBottom;
}
@keyframes oaoRotateOutBottom {
to {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
.oaoRotateXIn span:nth-child(even) {
animation-name: oaoRotateXInTop;
}
@keyframes oaoRotateXInTop {
from {
transform: translateY(-100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXIn span:nth-child(odd) {
animation-name: oaoRotateXInBottom;
}
@keyframes oaoRotateXInBottom {
from {
transform: translateY(100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXOut span:nth-child(even) {
animation-name: oaoRotateXOutTop;
}
@keyframes oaoRotateXOutTop {
to {
transform: translateY(-100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateXOut span:nth-child(odd) {
animation-name: oaoRotateXOutBottom;
}
@keyframes oaoRotateXOutBottom {
to {
transform: translateY(100px) rotateX(360deg);
opacity: 0;
}
}
.oaoRotateYIn span:nth-child(even) {
animation-name: oaoRotateYInTop;
}
@keyframes oaoRotateYInTop {
from {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYIn span:nth-child(odd) {
animation-name: oaoRotateYInBottom;
}
@keyframes oaoRotateYInBottom {
from {
transform: translateY(100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYOut span:nth-child(even) {
animation-name: oaoRotateYOutTop;
}
@keyframes oaoRotateYOutTop {
to {
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.oaoRotateYOut span:nth-child(odd) {
animation-name: oaoRotateYOutBottom;
}
@keyframes oaoRotateYOutBottom {
to {
transform: translateY(100px) rotateY(360deg);
opacity: 0;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
}
}
.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
}
}
.fadeInTop {
animation-name: fadeInTop;
}
@keyframes fadeInTop {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
}
}
.fadeInBottom {
animation-name: fadeInBottom;
}
@keyframes fadeInBottom {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(-100%);
}
}
.fadeOutRight {
animation-name: fadeOutRight;
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(100%);
}
}
.fadeOutTop {
animation-name: fadeOutTop;
}
@keyframes fadeOutTop {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
.fadeOutBottom {
animation-name: fadeOutBottom;
}
@keyframes fadeOutBottom {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(100%);
}
}
.moveFromLeft {
animation-name: moveFromLeft;
}
@keyframes moveFromLeft {
from {
transform: translateX(-800px);
}
}
.moveFromRight {
animation-name: moveFromRight;
}
@keyframes moveFromRight {
from {
transform: translateX(800px);
}
}
.moveFromTop {
animation-name: moveFromTop;
}
@keyframes moveFromTop {
from {
transform: translateY(-800px);
}
}
.moveFromBottom {
animation-name: moveFromBottom;
}
@keyframes moveFromBottom {
from {
transform: translateY(800px);
}
}
.moveToLeft {
animation-name: moveToLeft;
}
@keyframes moveToLeft {
to {
transform: translateX(-800px);
}
}
.moveToRight {
animation-name: moveToRight;
}
@keyframes moveToRight {
to {
transform: translateX(800px);
}
}
.moveToTop {
animation-name: moveToTop;
}
@keyframes moveToTop {
to {
transform: translateY(-800px);
}
}
.moveToBottom {
animation-name: moveToBottom;
}
@keyframes moveToBottom {
to {
transform: translateY(800px);
}
}
.doorCloseFromLeft {
animation-name: doorCloseFromLeft;
}
@keyframes doorCloseFromLeft {
from {
transform: perspective(400px) rotateY(90deg);
transform-origin: left;
opacity: 0;
}
50%, to {
transform: perspective(400px) rotateY(0);
transform-origin: left;
opacity: 1;
}
}
.doorOpenFromRight {
animation-name: doorOpenFromRight;
}
@keyframes doorOpenFromRight {
from {
transform: perspective(400px) rotateY(0);
transform-origin: left;
opacity: 1;
}
50%, to {
transform: perspective(400px) rotateY(90deg);
transform-origin: left;
opacity: 0;
}
}
.doorCloseFromRight {
animation-name: doorCloseFromRight;
}
@keyframes doorCloseFromRight {
from {
transform: perspective(400px) rotateY(-90deg);
transform-origin: right;
opacity: 0;
}
50%, to {
transform: perspective(400px) rotateY(0);
transform-origin: right;
opacity: 1;
}
}
.doorOpenFromLeft {
animation-name: doorOpenFromLeft;
}
@keyframes doorOpenFromLeft {
from {
transform: perspective(400px) rotateY(0);
transform-origin: right;
opacity: 1;
}
50%, to {
transform: perspective(400px) rotateY(-90deg);
transform-origin: right;
opacity: 0;
}
}
.heartbeatSlow {
animation-name: heartbeatSlow;
animation-iteration-count: infinite;
animation-duration: 0.5s;
}
@keyframes heartbeatSlow {
35%, 65% {
transform: scale(1.2);
}
}
.heartbeatFast {
animation-name: heartbeatFast;
animation-iteration-count: infinite;
}
.horizontalShake, .pulseShake {
-webkit-animation-iteration-count: infinite;
}
@keyframes heartbeatFast {
14%, 42% {
transform: scale(1.3);
}
28%, 70% {
transform: scale(1);
}
}
.hangOnLeft {
animation-name: hangOnLeft;
}
@keyframes hangOnLeft {
from {
transform-origin: left;
}
40% {
transform: rotate(100deg);
transform-origin: left;
}
55% {
transform: rotate(80deg);
transform-origin: left;
}
70% {
transform: rotate(95deg);
transform-origin: left;
}
85% {
transform: rotate(85deg);
transform-origin: left;
}
100% {
transform: rotate(90deg);
transform-origin: left;
}
}
.hangOnRight {
animation-name: hangOnRight;
}
@keyframes hangOnRight {
from {
transform-origin: right;
}
40% {
transform: rotate(-100deg);
transform-origin: right;
}
55% {
transform: rotate(-80deg);
transform-origin: right;
}
70% {
transform: rotate(-95deg);
transform-origin: right;
}
85% {
transform: rotate(-85deg);
transform-origin: right;
}
100% {
transform: rotate(-90deg);
transform-origin: right;
}
}
.hangAndDropLeft {
animation-name: hangAndDropLeft;
}
@keyframes hangAndDropLeft {
from {
transform-origin: left;
}
50% {
transform: rotate(100deg);
transform-origin: left;
}
60% {
transform: rotate(90deg);
transform-origin: left;
opacity: 1;
}
to {
transform: translateY(300px) rotate(70deg);
transform-origin: left;
opacity: 0;
}
}
.hangAndDropRight {
animation-name: hangAndDropRight;
}
@keyframes hangAndDropRight {
from {
transform-origin: right;
}
50% {
transform: rotate(-100deg);
transform-origin: right;
}
60% {
transform: rotate(-90deg);
transform-origin: right;
opacity: 1;
}
to {
transform: translateY(300px) rotate(-70deg);
transform-origin: right;
opacity: 0;
}
}
.pulseShake {
animation-name: pulseShake;
animation-iteration-count: infinite;
}
@keyframes pulseShake {
90% {
transform: scale(1);
}
92% {
transform: scale(1.2);
}
96% {
transform: scale(1, 1);
}
98% {
transform: scale(1.1);
}
}
.horizontalShake {
animation-name: horizontalShake;
animation-iteration-count: infinite;
}
.madMax, .verticalShake {
-webkit-animation-iteration-count: infinite;
}
@keyframes horizontalShake {
12%, 21%, 3%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% {
transform: translateX(5px);
}
15%, 24%, 33%, 42%, 51%, 6%, 60%, 68%, 77%, 86%, 95% {
transform: translateX(3px);
}
18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 9%, 98% {
transform: translateX(-5px);
}
}
.verticalShake {
animation-name: verticalShake;
animation-iteration-count: infinite;
}
@keyframes verticalShake {
12%, 21%, 3%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% {
transform: translateY(5px);
}
15%, 24%, 33%, 42%, 51%, 6%, 60%, 68%, 77%, 86%, 95% {
transform: translateY(3px);
}
18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 9%, 98% {
transform: translateY(-5px);
}
}
.madMax {
animation-name: madMax;
animation-iteration-count: infinite;
}
.coolHorizontalShake, .coolVerticalShake {
-webkit-animation-iteration-count: infinite;
}
@keyframes madMax {
12%, 21%, 3%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% {
transform: translateY(5px) scale(1.1);
}
15%, 24%, 33%, 42%, 51%, 6%, 60%, 68%, 77%, 86%, 95% {
transform: translateY(3px) scale(0.8);
}
18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 9%, 98% {
transform: translateY(-5px) scale(1.1);
}
}
.coolHorizontalShake {
animation-name: coolHorizontalShake;
animation-iteration-count: infinite;
}
@keyframes coolHorizontalShake {
21%, 3%, 39%, 57%, 74%, 92% {
transform: translateX(5px);
}
24%, 42%, 6%, 60%, 77%, 95% {
transform: translateX(3px);
}
27%, 45%, 63%, 80%, 9%, 98% {
transform: translateX(-5px);
}
}
.coolVerticalShake {
animation-name: coolVerticalShake;
animation-iteration-count: infinite;
}
@keyframes coolVerticalShake {
21%, 3%, 39%, 57%, 74%, 92% {
transform: translateY(5px);
}
24%, 42%, 6%, 60%, 77%, 95% {
transform: translateY(3px);
}
27%, 45%, 63%, 80%, 9%, 98% {
transform: translateY(-5px);
}
}
.quietMad {
animation-name: quietMad;
animation-iteration-count: infinite;
}
@keyframes quietMad {
21%, 3%, 39%, 57%, 74%, 92% {
transform: translateY(5px) scale(1.1);
}
24%, 42%, 6%, 60%, 77%, 95% {
transform: translateY(3px) scale(0.8);
}
27%, 45%, 63%, 80%, 9%, 98% {
transform: translateY(-5px) scale(1.1);
}
}
.vibration {
animation: vibration 0.1s linear infinite;
}
@keyframes vibration {
50% {
transform: skewY(1deg) skewX(-1deg) scale(1.06);
}
}
.pushReleaseFrom {
animation-name: pushReleaseFrom;
}
@keyframes pushReleaseFrom {
from {
transform: scale(3, 3);
opacity: 0;
}
30% {
transform: scale(0.5, 0.5);
}
}
.pushReleaseFromLeft {
animation-name: pushReleaseFromLeft;
}
@keyframes pushReleaseFromLeft {
from {
transform: translateX(-100%);
}
30% {
transform: translateX(100px);
}
}
.pushReleaseFromRight {
animation-name: pushReleaseFromRight;
}
@keyframes pushReleaseFromRight {
from {
transform: translateX(100%);
}
30% {
transform: translateX(-100px);
}
}
.pushReleaseFromTop {
animation-name: pushReleaseFromTop;
}
@keyframes pushReleaseFromTop {
from {
transform: translateY(-100%);
}
30% {
transform: translateY(100px);
}
}
.pushReleaseFromBottom {
animation-name: pushReleaseFromBottom;
}
@keyframes pushReleaseFromBottom {
from {
transform: translateY(100%);
}
30% {
transform: translateY(-100px);
}
}
.pushReleaseTo {
animation-name: pushReleaseTo;
}
@keyframes pushReleaseTo {
30% {
transform: scale(0.5, 0.5);
}
to {
transform: scale(5, 5);
opacity: 0;
}
}
.pushReleaseToLeft {
animation-name: pushReleaseToLeft;
}
@keyframes pushReleaseToLeft {
30% {
transform: translateX(100px);
}
to {
transform: translateX(-100%);
opacity: 0;
}
}
.pushReleaseToRight {
animation-name: pushReleaseToRight;
}
@keyframes pushReleaseToRight {
30% {
transform: translateX(-100px);
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.pushReleaseToTop {
animation-name: pushReleaseToTop;
}
@keyframes pushReleaseToTop {
30% {
transform: translateY(100px);
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
.pushReleaseToBottom {
animation-name: pushReleaseToBottom;
}
@keyframes pushReleaseToBottom {
30% {
transform: translateY(-100px);
}
to {
transform: translateY(100%);
opacity: 0;
}
}
.flipX {
animation-name: flipX;
}
@keyframes flipX {
from {
transform: perspective(600px) rotateX(-180deg);
opacity: 0;
}
to {
transform: perspective(600px) rotateX(-360deg);
}
}
.flipXZoomIn {
animation-name: flipXZoomIn;
}
@keyframes flipXZoomIn {
from {
transform: perspective(600px) rotateX(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateX(-180deg) scale(1.8);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateX(-360deg) scale(0.7);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
}
}
.flipXZoomOut {
animation-name: flipXZoomOut;
}
@keyframes flipXZoomOut {
from {
transform: perspective(600px) rotateX(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateX(180deg) scale(1.8);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateX(360deg) scale(0.7);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
}
}
.flipY {
animation-name: flipY;
}
@keyframes flipY {
from {
transform: perspective(600px) rotateY(180deg);
opacity: 0;
}
to {
transform: perspective(600px) rotateY(360deg);
}
}
.flipYZoomIn {
animation-name: flipYZoomIn;
}
@keyframes flipYZoomIn {
from {
transform: perspective(600px) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateY(180deg) scale(1.6);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateY(360deg) scale(0.7);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
}
}
.flipYZoomOut {
animation-name: flipYZoomOut;
}
@keyframes flipYZoomOut {
from {
transform: perspective(600px) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(600px) rotateY(180deg) scale(0.6);
animation-timing-function: ease-out;
}
80% {
transform: perspective(600px) rotateY(360deg) scale(1.8);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
}
}
.skewLeft {
animation-name: skewLeft;
}
@keyframes skewLeft {
70% {
transform: skewX(40deg);
}
}
.skewRight {
animation-name: skewRight;
}
@keyframes skewRight {
70% {
transform: skewX(-40deg);
}
}
.skewInLeft {
animation-name: skewInLeft;
}
@keyframes skewInLeft {
from {
opacity: 0;
transform: translateX(-100%) skewX(-40deg);
}
70% {
transform: skewX(-30deg);
}
}
.skewInRight {
animation-name: skewInRight;
}
@keyframes skewInRight {
from {
opacity: 0;
transform: translateX(100%) skewX(40deg);
}
70% {
transform: skewX(30deg);
}
}
.skewOutLeft {
animation-name: skewOutLeft;
}
@keyframes skewOutLeft {
20% {
transform: skewX(40deg);
}
to {
transform: translateX(-100%) skewX(40deg);
opacity: 0;
}
}
.skewOutRight {
animation-name: skewOutRight;
}
@keyframes skewOutRight {
20% {
transform: skewX(-40deg);
}
to {
transform: translateX(100%) skewX(-40deg);
opacity: 0;
}
}
.shockZoom {
animation-name: shockZoom;
}
@keyframes shockZoom {
from {
transform: matrix(5, 0, 0, 5, 0, 0);
}
35% {
transform: matrix(2, 0, 0, 2, 0, 0);
}
43% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.shockInLeft {
animation-name: shockInLeft;
}
@keyframes shockInLeft {
from {
transform: matrix(1, 0, 0, 1, -800, 0);
}
35% {
transform: matrix(1, 0, 0, 1, 50, 0);
}
43% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.shockInRight {
animation-name: shockInRight;
}
@keyframes shockInRight {
from {
transform: matrix(1, 0, 0, 1, 800, 0);
}
35% {
transform: matrix(1, 0, 0, 1, -50, 0);
}
43% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.shockInTop {
animation-name: shockInTop;
}
@keyframes shockInTop {
from {
transform: matrix(1, 0, 0, 1, 0, -400);
}
35% {
transform: matrix(1, 0, 0, 1, 0, 50);
}
43% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.shockInBottom {
animation-name: shockInBottom;
}
@keyframes shockInBottom {
from {
transform: matrix(1, 0, 0, 1, 0, 400);
}
35% {
transform: matrix(1, 0, 0, 1, 0, -50);
}
43% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.pullRelease {
animation-name: pullRelease;
}
@keyframes pullRelease {
15% {
transform: scale(1.8);
}
}
.pushRelease {
animation-name: pushRelease;
}
@keyframes pushRelease {
15% {
transform: scale(0.5);
}
}
.swingInLeft {
animation-name: swingInLeft;
}
@keyframes swingInLeft {
from {
transform: matrix(3, 0, 0, 3, -800, 0);
animation-timing-function: ease-out;
}
50% {
transform: matrix(1.3, 0, 0, 1.3, 20, 0);
}
}
.swingInRight {
animation-name: swingInRight;
}
@keyframes swingInRight {
from {
transform: matrix(3, 0, 0, 3, 800, 0);
animation-timing-function: ease-out;
}
50% {
transform: matrix(1.3, 0, 0, 1.3, -20, 0);
}
}
.swingInTop {
animation-name: swingInTop;
}
@keyframes swingInTop {
from {
transform: matrix(3, 0, 0, 3, 0, -800);
animation-timing-function: ease-out;
}
50% {
transform: matrix(1.3, 0, 0, 1.3, 0, 20);
}
}
.swingInBottom {
animation-name: swingInBottom;
}
@keyframes swingInBottom {
from {
transform: matrix(3, 0, 0, 3, 0, 800);
animation-timing-function: ease-out;
}
50% {
transform: matrix(1.3, 0, 0, 1.3, 0, -20);
}
}
.elevateLeft {
animation-name: elevateLeft;
}
@keyframes elevateLeft {
from {
transform: translateY(100%) rotate(-20deg);
transform-origin: right;
}
40% {
transform: rotate(20deg);
transform-origin: right;
}
65% {
transform: rotate(0);
transform-origin: right;
}
}
.elevateRight {
animation-name: elevateRight;
}
@keyframes elevateRight {
from {
transform: translateY(100%) rotate(20deg);
transform-origin: left;
}
40% {
transform: rotate(-20deg);
transform-origin: left;
}
65% {
transform: rotate(0);
transform-origin: left;
}
}
.rollFromLeft {
animation-name: rollFromLeft;
}
@keyframes rollFromLeft {
from {
transform: translateX(-100%) perspective(600px) rotateY(180deg);
opacity: 0;
}
to {
transform: translateX(0) perspective(600px) rotateY(0);
opacity: 1;
}
}
.rollFromRight {
animation-name: rollFromRight;
}
@keyframes rollFromRight {
from {
transform: translateX(100%) perspective(600px) rotateY(-180deg);
opacity: 0;
}
to {
transform: translateX(0) perspective(600px) rotateY(0);
opacity: 1;
}
}
.rollFromTop {
animation-name: rollFromTop;
}
@keyframes rollFromTop {
from {
transform: translateY(-100%) perspective(600px) rotateY(180deg);
opacity: 0;
}
to {
transform: translateY(0) perspective(600px) rotateY(0);
opacity: 1;
}
}
.rollFromBottom {
animation-name: rollFromBottom;
}
@keyframes rollFromBottom {
from {
transform: translateY(100%) perspective(600px) rotateY(-180deg);
opacity: 0;
}
to {
transform: translateY(0) perspective(600px) rotateY(0);
opacity: 1;
}
}
.rollToLeft {
animation-name: rollToLeft;
}
@keyframes rollToLeft {
from {
transform: translateX(0) perspective(600px) rotateY(0);
opacity: 1;
}
to {
transform: translateX(-100%) perspective(600px) rotateY(180deg);
opacity: 0;
}
}
.rollToRight {
animation-name: rollToRight;
}
@keyframes rollToRight {
from {
transform: translateX(0) perspective(600px) rotateY(0);
opacity: 1;
}
to {
transform: translateX(100%) perspective(600px) rotateY(-180deg);
opacity: 0;
}
}
.rollToTop {
animation-name: rollToTop;
}
@keyframes rollToTop {
from {
transform: translateY(0) perspective(600px) rotateX(0);
opacity: 1;
}
to {
transform: translateY(-100%) perspective(600px) rotateX(180deg);
opacity: 0;
}
}
.rollToBottom {
animation-name: rollToBottom;
}
@keyframes rollToBottom {
to {
transform: translateY(100%) perspective(600px) rotateX(-180deg);
opacity: 0;
}
}
.rotate {
animation-name: rotate;
animation-timing-function: ease-in-out;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.rotateX {
animation-name: rotateX;
}
@keyframes rotateX {
from {
transform: perspective(600px) rotateX(0);
}
to {
transform: perspective(600px) rotateX(90deg);
}
}
.rotateXIn {
animation-name: rotateXIn;
}
@keyframes rotateXIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
5% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg);
}
}
.rotateXOut {
animation-name: rotateXOut;
}
@keyframes rotateXOut {
95% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg);
}
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
opacity: 0;
}
}
.rotateY {
animation-name: rotateY;
}
@keyframes rotateY {
from {
transform: perspective(600px) rotateY(0);
}
to {
transform: perspective(600px) rotateY(90deg);
}
}
.rotateYIn {
animation-name: rotateYIn;
}
@keyframes rotateYIn {
from {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
5% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
}
}
.rotateYOut {
animation-name: rotateYOut;
}
@keyframes rotateYOut {
95% {
transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg);
}
to {
transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
opacity: 0;
}
}
.rotateInLeft {
animation-name: rotateInLeft;
}
@keyframes rotateInLeft {
from {
opacity: 0;
transform: translateX(-100%) rotate(0);
}
to {
transform: translateX(0) rotate(360deg);
}
}
.rotateInRight {
animation-name: rotateInRight;
}
@keyframes rotateInRight {
from {
opacity: 0;
transform: translateX(100%) rotate(0);
}
to {
transform: translateX(0) rotate(-360deg);
}
}
.rotateInTop {
animation-name: rotateInTop;
}
@keyframes rotateInTop {
from {
opacity: 0;
transform: translateY(-400%) rotate(0);
}
to {
transform: translateX(0) rotate(360deg);
}
}
.rotateInBottom {
animation-name: rotateInBottom;
}
@keyframes rotateInBottom {
from {
opacity: 0;
transform: translateY(400%) rotate(0);
}
to {
transform: translateX(0) rotate(360deg);
}
}
.rotateOutLeft {
animation-name: rotateOutLeft;
}
@keyframes rotateOutLeft {
from {
transform: translateX(0) rotate(360deg);
}
to {
transform: translateX(-800px) rotate(0);
opacity: 0;
}
}
.rotateOutRight {
animation-name: rotateOutRight;
}
@keyframes rotateOutRight {
from {
transform: translateX(0) rotate(-360deg);
}
to {
transform: translateX(800px) rotate(0);
opacity: 0;
}
}
.rotateOutTop {
animation-name: rotateOutTop;
}
@keyframes rotateOutTop {
from {
transform: translateX(0) rotate(360deg);
}
to {
transform: translateY(-800px) rotate(0);
opacity: 0;
}
}
.rotateOutBottom {
animation-name: rotateOutBottom;
}
@keyframes rotateOutBottom {
from {
transform: translateX(0) rotate(360deg);
}
to {
transform: translateY(800px) rotate(0);
opacity: 0;
}
}
.spinToLeft {
animation-name: spinToLeft;
}
@keyframes spinToLeft {
from, to {
transform-origin: left bottom;
}
from {
transform: rotate(90deg);
opacity: 0;
}
}
.spinToRight {
animation-name: spinToRight;
}
@keyframes spinToRight {
from, to {
transform-origin: right bottom;
}
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinToTop {
animation-name: spinToTop;
}
@keyframes spinToTop {
from, to {
transform-origin: left bottom;
}
from {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinToBottom {
animation-name: spinToBottom;
}
@keyframes spinToBottom {
from, to {
transform-origin: right bottom;
}
from {
transform: rotate(90deg);
opacity: 0;
}
}
.spinFromLeft {
animation-name: spinFromLeft;
}
@keyframes spinFromLeft {
from, to {
transform-origin: left bottom;
}
to {
transform: rotate(90deg);
opacity: 0;
}
}
.spinFromRight {
animation-name: spinFromRight;
}
@keyframes spinFromRight {
from, to {
transform-origin: right bottom;
}
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinFromTop {
animation-name: spinFromTop;
}
@keyframes spinFromTop {
from, to {
transform-origin: left bottom;
}
to {
transform: rotate(-90deg);
opacity: 0;
}
}
.spinFromBottom {
animation-name: spinFromBottom;
}
@keyframes spinFromBottom {
from, to {
transform-origin: right bottom;
}
to {
transform: rotate(90deg);
opacity: 0;
}
}
.blurIn {
animation-name: blurIn;
}
@keyframes blurIn {
from {
filter: blur(20px);
opacity: 0;
}
}
.blurInLeft {
animation-name: blurInLeft;
}
@keyframes blurInLeft {
from {
transform: translateX(100%);
filter: blur(20px);
opacity: 0;
}
}
.blurInRight {
animation-name: blurInRight;
}
@keyframes blurInRight {
from {
transform: translateX(-100%);
filter: blur(20px);
opacity: 0;
}
}
.blurInTop {
animation-name: blurInTop;
}
@keyframes blurInTop {
from {
transform: translateY(100%);
filter: blur(20px);
opacity: 0;
}
}
.blurInBottom {
animation-name: blurInBottom;
}
@keyframes blurInBottom {
from {
transform: translateY(-100%);
filter: blur(20px);
opacity: 0;
}
}
.blurOut {
animation-name: blurOut;
}
@keyframes blurOut {
85%, to {
filter: blur(20px);
}
to {
opacity: 0;
}
}
.blurOutLeft {
animation-name: blurOutLeft;
}
@keyframes blurOutLeft {
85%, to {
filter: blur(20px);
transform: translateX(100%);
}
to {
opacity: 0;
}
}
.blurOutRight {
animation-name: blurOutRight;
}
@keyframes blurOutRight {
85%, to {
filter: blur(20px);
transform: translateX(-100%);
}
to {
opacity: 0;
}
}
.blurOutTop {
animation-name: blurOutTop;
}
@keyframes blurOutTop {
85%, to {
filter: blur(20px);
transform: translateY(100%);
}
to {
opacity: 0;
}
}
.blurOutBottom {
animation-name: blurOutBottom;
}
@keyframes blurOutBottom {
85%, to {
filter: blur(20px);
transform: translateY(-100%);
}
to {
opacity: 0;
}
}
.bounceFromTop {
animation-name: bounceFromTop;
}
@keyframes bounceFromTop {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, -80px, 0) scale3d(1, 1.6, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, -20px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.bounceFromDown {
animation-name: bounceFromDown;
}
@keyframes bounceFromDown {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: translate3d(0, 0, 0);
}
41%, 44% {
animation-timing-function: ease-in;
transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
}
70% {
animation-timing-function: ease-in;
transform: translate3d(0, 20px, 0);
}
90% {
transform: translate3d(0, 4px, 0);
}
}
.bounceX {
animation-name: bounceX;
}
@keyframes bounceX {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1.8, 1, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1.5, 1, 1);
}
90% {
transform: scale3d(1.1, 1, 1);
}
}
.bounceY {
animation-name: bounceY;
}
@keyframes bounceY {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale3d(1, 1, 1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale3d(1, 2, 1);
}
70% {
animation-timing-function: ease-in;
transform: scale3d(1, 1.5, 1);
}
90% {
transform: scale3d(1, 1.1, 1);
}
}
.bounceZoomIn {
animation-name: bounceZoomIn;
}
@keyframes bounceZoomIn {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(1.5);
}
70% {
animation-timing-function: ease-in;
transform: scale(1.3);
}
90% {
transform: scale(1.1);
}
}
.bounceZoomOut {
animation-name: bounceZoomOut;
}
@keyframes bounceZoomOut {
0%, 100%, 25%, 55%, 85% {
animation-timing-function: ease-out;
transform: scale(1);
}
41%, 44% {
animation-timing-function: ease-in;
transform: scale(0.3);
}
70% {
animation-timing-function: ease-in;
transform: scale(0.5);
}
90% {
transform: scale(0.9);
}
}
.bounceInTop {
animation-name: bounceInTop;
}
@keyframes bounceInTop {
0% {
transform: translate3d(0, -300%, 0);
}
58% {
transform: translate3d(0, 27px, 0);
}
73% {
transform: translate3d(0, -12px, 0);
}
88% {
transform: translate3d(0, 7px, 0);
}
}
.bounceInBottom {
animation-name: bounceInBottom;
}
@keyframes bounceInBottom {
0% {
transform: translate3d(0, 300%, 0);
}
58% {
transform: translate3d(0, -27px, 0);
}
73% {
transform: translate3d(0, 12px, 0);
}
88% {
transform: translate3d(0, -8px, 0);
}
}
.bounceInLeft {
animation-name: bounceInLeft;
}
@keyframes bounceInLeft {
0% {
transform: translate3d(-300%, 0, 0);
}
58% {
transform: translate3d(27px, 0, 0);
}
73% {
transform: translate3d(-12px, 0, 0);
}
88% {
transform: translate3d(8px, 0, 0);
}
}
.bounceInRight {
animation-name: bounceInRight;
}
@keyframes bounceInRight {
0% {
transform: translate3d(300%, 0, 0);
}
58% {
transform: translate3d(-27px, 0, 0);
}
73% {
transform: translate3d(12px, 0, 0);
}
88% {
transform: translate3d(-8px, 0, 0);
}
}
.bounceOutTop {
animation-name: bounceOutTop;
}
@keyframes bounceOutTop {
18%, 33%, 48% {
opacity: 1;
}
18% {
transform: translate3d(0, 27px, 0);
}
33% {
transform: translate3d(0, -12px, 0);
}
48% {
transform: translate3d(0, 8px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, -300%, 0);
}
}
.bounceOutBottom {
animation-name: bounceOutBottom;
}
@keyframes bounceOutBottom {
18%, 33%, 48% {
opacity: 1;
}
18% {
transform: translate3d(0, -27px, 0);
}
33% {
transform: translate3d(0, 12px, 0);
}
48% {
transform: translate3d(0, -8px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 300%, 0);
}
}
.bounceOutLeft {
animation-name: bounceOutLeft;
}
@keyframes bounceOutLeft {
18%, 33%, 48% {
opacity: 1;
}
18% {
transform: translate3d(27px, 0, 0);
}
33% {
transform: translate3d(-12px, 0, 0);
}
48% {
transform: translate3d(8px, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-300%, 0, 0);
}
}
.bounceOutRight {
animation-name: bounceOutRight;
}
@keyframes bounceOutRight {
18%, 33%, 48% {
opacity: 1;
}
18% {
transform: translate3d(-27px, 0, 0);
}
33% {
transform: translate3d(12px, 0, 0);
}
48% {
transform: translate3d(-8px, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(300%, 0, 0);
}
}
.perspectiveToTop {
animation-name: perspectiveToTop;
transform: perspective(500px);
transform-style: preserve-3d;
}
@keyframes perspectiveToTop {
50% {
opacity: 1;
}
to {
transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
opacity: 0;
}
}
.perspectiveToBottom {
animation-name: perspectiveToBottom;
transform: perspective(500px);
transform-style: preserve-3d;
}
@keyframes perspectiveToBottom {
50% {
opacity: 1;
}
to {
transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
opacity: 0;
}
}
.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
from {
transform: scale(10);
opacity: 0;
}
}
.zoomInLeft {
animation-name: zoomInLeft;
}
@keyframes zoomInLeft {
from {
transform: scale(10) translateX(-50%);
opacity: 0;
}
}
.zoomInRight {
animation-name: zoomInRight;
}
@keyframes zoomInRight {
from {
transform: scale(10) translateX(50%);
opacity: 0;
}
}
.zoomInTop {
animation-name: zoomInTop;
}
@keyframes zoomInTop {
from {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.zoomInBottom {
animation-name: zoomInBottom;
}
@keyframes zoomInBottom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
}
.zoomOut {
animation-name: zoomOut;
}
@keyframes zoomOut {
to {
transform: scale(10);
opacity: 0;
}
}
.zoomOutLeft {
animation-name: zoomOutLeft;
}
@keyframes zoomOutLeft {
to {
transform: scale(10) translateX(-50%);
opacity: 0;
}
}
.zoomOutRight {
animation-name: zoomOutRight;
}
@keyframes zoomOutRight {
to {
transform: scale(10) translateX(50%);
opacity: 0;
}
}
.zoomOutTop {
animation-name: zoomOutTop;
}
@keyframes zoomOutTop {
to {
transform: scale(10) translateY(-50%);
opacity: 0;
}
}
.zoomOutBottom {
animation-name: zoomOutBottom;
}
@keyframes zoomOutBottom {
to {
transform: scale(10) translateY(50%);
opacity: 0;
}
}
.danceTop {
animation-name: danceTop;
transform-origin: top;
}
@keyframes danceTop {
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
}
.danceMiddle {
animation-name: danceMiddle;
}
@keyframes danceMiddle {
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
}
.danceBottom {
animation-name: danceBottom;
transform-origin: bottom;
}
@keyframes danceBottom {
16% {
transform: skew(-14deg);
}
33% {
transform: skew(12deg);
}
49% {
transform: skew(-8deg);
}
66% {
transform: skew(6deg);
}
83% {
transform: skew(-4deg);
}
}
/* resset.dev • v5.0.2 */
/* # =================================================================
# Global selectors
# ================================================================= */
html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
/* Prevent adjustments of font size after orientation changes in iOS */
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
*,
::before,
::after {
background-repeat: no-repeat;
/* Set `background-repeat: no-repeat` to all elements and pseudo elements */
box-sizing: inherit;
}
::before,
::after {
text-decoration: inherit;
/* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
vertical-align: inherit;
}
* {
padding: 0;
/* Reset `padding` and `margin` of all elements */
margin: 0;
}
/* # =================================================================
# General elements
# ================================================================= */
hr {
overflow: visible;
/* Show the overflow in Edge and IE */
height: 0;
/* Add the correct box sizing in Firefox */
color: inherit;
/* Correct border color in Firefox. */
}
details,
main {
display: block;
/* Render the `main` element consistently in IE. */
}
summary {
display: list-item;
/* Add the correct display in all browsers */
}
small {
font-size: 80%;
/* Set font-size to 80% in `small` elements */
}
[hidden] {
display: none;
/* Add the correct display in IE */
}
abbr[title] {
border-bottom: none;
/* Remove the bottom border in Chrome 57 */
/* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
a {
background-color: transparent;
/* Remove the gray background on active links in IE 10 */
}
a:active,
a:hover {
outline-width: 0;
/* Remove the outline when hovering in all browsers */
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
/* Specify the font family of code elements */
}
pre {
font-size: 1em;
/* Correct the odd `em` font sizing in all browsers */
}
b,
strong {
font-weight: bolder;
/* Add the correct font weight in Chrome, Edge, and Safari */
}
/* https://gist.github.com/unruthless/413930 */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
border-color: inherit;
/* Correct border color in all Chrome, Edge, and Safari. */
text-indent: 0;
/* Remove text indentation in Chrome, Edge, and Safari */
}
iframe {
border-style: none;
}
/* # =================================================================
# Forms
# ================================================================= */
input {
border-radius: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
/* Correct the cursor style of increment and decrement buttons in Chrome */
}
[type=search] {
-webkit-appearance: textfield;
/* Correct the odd appearance in Chrome and Safari */
outline-offset: -2px;
/* Correct the outline style in Safari */
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
/* Remove the inner padding in Chrome and Safari on macOS */
}
textarea {
overflow: auto;
/* Internet Explorer 11+ */
resize: vertical;
/* Specify textarea resizability */
}
button,
input,
optgroup,
select,
textarea {
font: inherit;
/* Specify font inheritance of form elements */
}
optgroup {
font-weight: bold;
/* Restore the font weight unset by the previous rule */
}
button {
overflow: visible;
/* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}
button,
select {
text-transform: none;
/* Firefox 40+, Internet Explorer 11- */
}
/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
cursor: pointer;
}
/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
outline: 1px dotted ButtonText;
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
/* Correct the inability to style clickable types in iOS */
}
/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
background-color: transparent;
border-style: none;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline-width: 0;
}
/* Style select like a standard input */
select {
-moz-appearance: none;
/* Firefox 36+ */
-webkit-appearance: none;
/* Chrome 41+ */
}
select::-ms-expand {
display: none;
/* Internet Explorer 11+ */
}
select::-ms-value {
color: currentColor;
/* Internet Explorer 11+ */
}
legend {
border: 0;
/* Correct `color` not being inherited in IE 8/9/10/11 */
color: inherit;
/* Correct the color inheritance from `fieldset` elements in IE */
display: table;
/* Correct the text wrapping in Edge and IE */
max-width: 100%;
/* Correct the text wrapping in Edge and IE */
white-space: normal;
/* Correct the text wrapping in Edge and IE */
max-width: 100%;
/* Correct the text wrapping in Edge 18- and IE */
}
::-webkit-file-upload-button {
/* Correct the inability to style clickable types in iOS and Safari */
-webkit-appearance: button;
color: inherit;
font: inherit;
/* Change font properties to `inherit` in Chrome and Safari */
}
/* Replace pointer cursor in disabled elements */
[disabled] {
cursor: default;
}
/* # =================================================================
# Specify media element style
# ================================================================= */
img {
border-style: none;
/* Remove border when inside `a` element in IE 8/9/10 */
}
/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
vertical-align: baseline;
}
/* # =================================================================
# Accessibility
# ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
cursor: progress;
}
/* Specify the pointer cursor of trigger elements */
[aria-controls] {
cursor: pointer;
}
/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
cursor: default;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
li {
list-style-type: none;
}
img {
width: 100%;
image-rendering: auto;
}
.wrapper {
width: 100%;
margin: 0 auto;
position: relative;
background-image: url("../img/bg.png");
background-position: top center;
background-repeat: no-repeat;
background-size: 1100px;
}
.inner {
width: 1000px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
.inner_fullwidth {
width: 100%;
margin: 0 auto;
}
.contact_inner {
margin: 0 auto 30px auto !important;
}
.header {
width: 1000px;
margin: 0 auto;
}
.header_inner {
width: 1000px;
margin: 0 auto;
padding: 0 50px;
}
.header_row {
display: flex;
flex-direction: row;
}
.header_left {
width: 80%;
}
.header_right {
width: 20%;
}
.contact_form {
opacity: 0;
width: 1000px;
margin: 0 auto;
position: relative;
z-index: 999;
}
.contact_form .contact_form_inner {
position: relative;
padding: 10px;
background: #0071b8;
color: #fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
.contact_form .contact_form_inner .contact_column {
display: flex;
flex-direction: column;
}
.contact_form .contact_form_inner .contact_column .contact_top p {
font-size: 26px;
text-align: center;
font-weight: 900;
background: #fff;
color: #0071b8;
}
.contact_form .contact_form_inner .contact_column .contact_bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
padding: 14px 0 0 0;
}
.contact_form .contact_form_inner .contact_column .contact_bottom .contact_left {
width: 50%;
text-align: center;
}
.contact_form .contact_form_inner .contact_column .contact_bottom .contact_left img {
width: 100%;
margin: 0;
}
.contact_form .contact_form_inner .contact_column .contact_bottom .contact_left p {
font-size: 19px;
font-weight: bold;
margin: 0;
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.contact_form .contact_form_inner .contact_column .contact_bottom .contact_right a {
display: block;
text-decoration: none;
color: #fff;
padding: 3px 30px;
height: 56px;
font-size: 28px;
font-weight: bold;
text-align: center;
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0);
background: rgb(237, 90, 36);
background: linear-gradient(0deg, rgb(237, 90, 36) 0%, rgb(255, 180, 0) 100%);
transition: all 0.2s;
}
.contact_form .contact_form_inner .contact_column .contact_bottom .contact_right a:hover {
opacity: 0.9;
transition: all 0.2s;
}
.contact_form_noanimation {
opacity: 1;
width: 1000px;
margin: 0 auto;
position: relative;
z-index: 999;
}
.contact_form_noanimation .contact_form_inner {
position: relative;
padding: 10px;
background: #0071b8;
color: #fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
.contact_form_noanimation .contact_form_inner .contact_column {
display: flex;
flex-direction: column;
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_top p {
font-size: 26px;
text-align: center;
font-weight: 900;
background: #fff;
color: #0071b8;
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
padding: 14px 0 0 0;
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_bottom .contact_left {
width: 50%;
text-align: center;
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_bottom .contact_left img {
width: 100%;
margin: 0;
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_bottom .contact_left p {
font-size: 19px;
font-weight: bold;
margin: 0;
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_bottom .contact_right a {
display: block;
text-decoration: none;
color: #fff;
padding: 3px 30px;
height: 56px;
font-size: 28px;
font-weight: bold;
text-align: center;
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0);
background: rgb(237, 90, 36);
background: linear-gradient(0deg, rgb(237, 90, 36) 0%, rgb(255, 180, 0) 100%);
transition: all 0.2s;
}
.contact_form_noanimation .contact_form_inner .contact_column .contact_bottom .contact_right a:hover {
opacity: 0.9;
transition: all 0.2s;
}
.contact_footer {
background: #0071b8;
padding: 40px 50px;
}
.contact_footer .inner {
width: 100%;
padding: 0;
}
.contact_footer .inner h3 {
color: #fff;
text-align: center;
font-size: 30px;
margin: 0 0 10px 0;
}
.contact_footer .inner div {
background: #fff;
color: #000;
padding: 30px;
margin: 0 0 30px 0;
}
.global_nav {
display: flex;
flex-direction: row;
padding: 30px 0 30px 0;
}
.global_nav li a {
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 0px rgb(0, 0, 0);
margin-right: 2em;
}
.ttl {
width: 100%;
margin-left: -100px;
padding: 30px 0;
background: rgb(0, 0, 0);
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
}
.ttl img {
margin-left: 95px;
width: 560px;
}
.visual-image img {
width: 90%;
margin: -20px 0 0 0;
}
.okomari {
width: 1000px;
margin: 0 auto;
padding: 50px 0;
}
.okomari h2 {
margin: 0 auto 30px auto;
font-size: 36px;
font-weight: bold;
text-align: center;
color: #bd272d;
}
.okomari h2 span {
background: linear-gradient(transparent 60%, #f8e9ea 60%);
}
.okomari ul {
width: 780px;
margin: 0 auto 30px auto;
}
.okomari ul li {
font-size: 24px;
font-weight: 400;
margin: 0 0 10px 0;
}
.okomari ul li span {
font-family: Helvetica, sans-serif;
font-size: 16px;
display: inline-block;
padding: 2px 10px;
margin: 0 10px 0 0;
line-height: 1;
background: #000;
color: #fff;
text-transform: uppercase;
}
.okomari ul li span i {
margin: 0 0 0 3px;
font-weight: bold;
font-style: normal;
font-size: 22px;
}
.okomari .ansin {
width: 900px;
background: #bd272d;
color: #fff;
text-align: center;
font-weight: bold;
line-height: 1.4;
padding: 10px 0;
}
.okomari .ansin p {
font-size: 30px;
}
.case {
background: #e4ebf0;
padding: 50px 0;
position: relative;
}
.case .eng_sub {
opacity: 0;
font-size: 16px;
color: #0071b8;
text-align: center;
margin: 0 0 5px 0;
}
.case_w {
background: #ffffff;
padding: 50px 0;
position: relative;
}
.case_w .eng_sub {
font-size: 16px;
color: #0071b8;
text-align: center;
margin: 0 0 5px 0;
}
.case_w p {
font-size: 22px;
font-weight: bold;
text-align: center;
}
.section_ttl {
background: #0071b8;
color: #fff;
font-size: 28px;
text-align: center;
margin: 0 0 50px 0;
position: relative;
padding: 6px 0;
}
.section_ttl::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
bottom: -10px;
background: #0071b8;
z-index: 1;
}
.list {
display: flex;
align-items: center;
background: #fff;
min-height: 100px;
margin: 0 0 20px 0;
padding: 20px 50px 20px 120px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
opacity: 0;
position: relative;
z-index: 1;
}
.list::before {
content: "";
position: absolute;
left: 15px;
top: -7px;
width: 70px;
height: 110px;
z-index: 2;
}
.list p {
font-weight: bold;
font-size: 26px;
line-height: 1.4;
}
.list_banner:before {
background: url(../img/banner_plane.png);
background-size: contain;
background-repeat: no-repeat;
}
.doctor {
width: 400px;
position: absolute;
right: -30px;
bottom: -70px;
z-index: 3;
}
.box {
background: #fff;
margin: 0 0 60px 0;
padding: 30px;
height: 380px;
}
.box h4 {
font-size: 24px;
margin: 0 0 5px 0;
}
.box h5 {
font-size: 18px;
font-weight: bold;
line-height: 1.4;
margin: 0 0 15px 0;
}
.box p {
line-height: 1.4;
margin: 0 0 45px 0;
}
.box ul li {
border-bottom: 1px solid #aaa;
padding: 10px 0;
}
.box ul li:first-child {
border-top: 1px solid #aaa;
}
.box table {
border-collapse: collapse;
}
.box table tr {
border-top: none;
border-bottom: 1px solid #aaa;
}
.box table tr:first-child {
border-top: 1px solid #aaa;
}
.box table tr td {
padding: 10px 0;
}
.box .box_row {
display: flex;
flex-direction: row;
}
.box .box_row div {
min-width: 48%;
}
.box .box_row .shoroku {
margin-top: -70px;
min-width: 560px;
}
.box .box_row .endaisystem {
margin-top: -65px;
margin-left: -60px;
margin-right: 30px;
min-width: 460px;
}
.box .box_row .endaisystem img {
filter: drop-shadow(3px 0px 3px rgba(0, 0, 0, 0.15));
}
.fukidashi_black {
opacity: 0;
font-size: 24px !important;
position: relative;
color: #000;
font-weight: bold;
text-align: center;
}
.fukidashi_black:before {
content: "";
position: absolute;
width: 1px;
top: 50%;
margin-left: -10px;
transform: translateY(-50%) rotate(-30deg);
transform-origin: center center;
height: 34px;
border: 1px solid #000;
}
.fukidashi_black:after {
content: "";
position: absolute;
width: 1px;
top: 50%;
margin-left: 10px;
transform: translateY(-50%) rotate(30deg);
transform-origin: center center;
height: 34px;
border: 1px solid #000;
}
.fukidashi_white {
font-size: 24px !important;
position: relative;
color: #fff;
font-weight: bold;
}
.fukidashi_white:before {
content: "";
position: absolute;
width: 1px;
top: 50%;
margin-left: -10px;
transform: translateY(-50%) rotate(-30deg);
transform-origin: center center;
height: 34px;
border: 1px solid #fff;
}
.fukidashi_white:after {
content: "";
position: absolute;
width: 1px;
top: 50%;
margin-left: 10px;
transform: translateY(-50%) rotate(30deg);
transform-origin: center center;
height: 34px;
border: 1px solid #fff;
}
.row {
opacity: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap;
gap: 10px;
margin: 0 0 60px 0;
}
.row li {
font-size: 18px;
line-height: 1.4;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 999em;
background: rgb(234, 242, 248);
background: linear-gradient(0deg, rgb(244, 252, 255) 0%, rgb(236, 242, 247) 100%);
width: 210px;
height: 210px;
text-align: center;
}
.btn {
width: 60%;
margin: 0 auto;
display: block;
text-decoration: none;
color: #fff;
padding: 3px 30px;
height: 56px;
font-size: 28px;
font-weight: bold;
text-align: center;
text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0);
background: rgb(237, 90, 36);
background: linear-gradient(0deg, rgb(237, 90, 36) 0%, rgb(255, 180, 0) 100%);
transition: all 0.2s;
}
.btn:hover {
text-decoration: none;
opacity: 0.9;
transition: all 0.2s;
}
.unei {
background: #eee;
padding: 15px 0;
}
.unei p {
font-size: 14px;
line-height: 1.5;
}
.unei li {
font-size: 14px;
line-height: 1.5;
}
.gakkaihp {
width: 82%;
margin: -45px 0 0 60px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}
.insatu {
width: 105%;
margin: 20px 0 20px -60px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}
.sankaform {
width: 110%;
margin: 25px -60px 25px 25px;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
}
img {
vertical-align: middle;
}
#case01 {
margin-bottom: 40px;
}
#case03 {
margin: 40px 0 60px 0;
padding: 80px 0 30px 0;
}
#js-pagetop {
position: fixed;
width: 100px;
height: 100px;
border-radius: 8px;
background: #0071b8;
color: #fff;
bottom: 50px;
right: 50px;
cursor: pointer;
z-index: 99999;
}
#js-pagetop span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
text-align: center;
font-size: 18px;
font-weight: bold;
}
/*きらっと光る*/
.btnshine {
/*キラッと光る基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
background: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
outline: none;
overflow: hidden;
}
/*キラッと光る*/
.btnshine::before {
content: "";
/*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
/*キラッと光る形状*/
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
transform: skewX(-25deg);
animation: shine 0.9s;
}
/*hoverした際の移動のアニメーション*/
@keyframes shine {
100% {
left: 125%;
}
}/*# sourceMappingURL=style.css.map */