CSS3アニメーション効果集_html/css_WEB-ITnose

@charset "UTF-8";/*! * animate.css -http://daneden.me/animate * バージョン - 3.5.1 * MIT ライセンスに基づいてライセンス供与 - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */.アニメーション { -webkit-animation-duration: 1s;  アニメーション期間: 1 秒。  -webkit-animation-fill-mode: 両方;  アニメーションフィルモード: 両方;}.animated.infinite { -webkit-animation-iteration-count: 無限;  アニメーション反復回数: 無限;}.animated.hinge { -webkit-animation-duration: 2s;  アニメーション期間: 2 秒;}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut { -webkit-animation-duration: .75 秒;  アニメーション期間: .75 秒;}@-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);    -webkit-transform:translate3d(0,0,0);    変換：translate3d(0,0,0);  } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    アニメーション タイミング関数: cubic-bezier(0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d(0, -30px, 0);    変換：translate3d(0, -30px, 0);  } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    アニメーション タイミング関数: cubic-bezier(0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d(0, -15px, 0);    変換：translate3d(0, -15px, 0);  90% { -webkit-transform:translate3d(0,-4px,0);    変換：translate3d(0,-4px,0);  }}@keyframes バウンス { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);    -webkit-transform:translate3d(0,0,0);    変換：translate3d(0,0,0);  } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    アニメーション タイミング関数: cubic-bezier(0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d(0, -30px, 0);    変換：translate3d(0, -30px, 0);  } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);    アニメーション タイミング関数: cubic-bezier(0.755, 0.050, 0.855, 0.060);    -webkit-transform:translate3d(0, -15px, 0);    変換：translate3d(0, -15px, 0);  90% { -webkit-transform:translate3d(0,-4px,0);    変換：translate3d(0,-4px,0);  }}.bounce { -webkit アニメーション名: バウンス;  アニメーション名: バウンス;  -webkit-transform-origin: 中央下;  変換元: 中央下;}@-webkit-keyframes フラッシュ { から、50%、{ 不透明度: 1;  } 25%、75% { 不透明度: 0;  }}@keyframes フラッシュ { から、50%、から { 不透明度: 1;  } 25%、75% { 不透明度: 0;  }}.flash { -webkit アニメーション名: flash;  アニメーション名: flash;}/* 当初の作成者は Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframespulse { from { -webkit-transform:scale3d(1, 1, 1) ;    変換:scale3d(1, 1, 1);  } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05);    変換:scale3d(1.05, 1.05, 1.05);  } から { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}@keyframes パルス { from { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05);    変換:scale3d(1.05, 1.05, 1.05);  } から { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}.pulse { -webkit アニメーション名: パルス;  アニメーション名: パルス;}@-webkit-keyframes robotBand { from { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  30% { -webkit-transform:scale3d(1.25, 0.75, 1);    変換:scale3d(1.25, 0.75, 1);  } 40% { -webkit-transform:scale3d(0.75, 1.25, 1);    変換:scale3d(0.75, 1.25, 1);  50% { -webkit-transform:scale3d(1.15, 0.85, 1);    変換:scale3d(1.15, 0.85, 1);  65% { -webkit-transform:scale3d(.95, 1.05, 1);    変換:scale3d(.95, 1.05, 1);  75% { -webkit-transform:scale3d(1.05, .95, 1);    変換:scale3d(1.05, .95, 1);  } から { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}@keyframes ラバーバンド { from { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  30% { -webkit-transform:scale3d(1.25, 0.75, 1);    変換:scale3d(1.25, 0.75, 1);  } 40% { -webkit-transform:scale3d(0.75, 1.25, 1);    変換:scale3d(0.75, 1.25, 1);  50% { -webkit-transform:scale3d(1.15, 0.85, 1);    変換:scale3d(1.15, 0.85, 1);  65% { -webkit-transform:scale3d(.95, 1.05, 1);    変換:scale3d(.95, 1.05, 1);  75% { -webkit-transform:scale3d(1.05, .95, 1);    変換:scale3d(1.05, .95, 1);  } から { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}.rubberBand { -webkit アニメーション名: ラバーバンド;  アニメーション名: ラバーバンド;}@-webkit-keyframes シェイク { from, to { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  } 10%、30%、50%、70%、90% { -webkit-transform:translate3d(-10px, 0, 0);    変換：translate3d(-10px, 0, 0);  } 20%、40%、60%、80% { -webkit-transform:translate3d(10px, 0, 0);    変換：translate3d(10px, 0, 0);  }}@keyframes シェイク { from, to { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  } 10%、30%、50%、70%、90% { -webkit-transform:translate3d(-10px, 0, 0);    変換：translate3d(-10px, 0, 0);  } 20%、40%、60%、80% { -webkit-transform:translate3d(10px, 0, 0);    変換：translate3d(10px, 0, 0);  }}.shake { -webkit アニメーション名: シェイク;  アニメーション名: シェイク;}@-webkit-keyframes headShake { 0% { -webkit-transform: translationX(0);    変換:translateX(0);  } 6.5% { -webkit-transform: 変換X(-6px) 回転Y(-9度);    変換：translateX（-6px）rotateY（-9deg）;  } 18.5% { -webkit-transform: 変換 X(5px) 回転 Y(7 度);    変換：translateX(5px)rotateY(7deg);  } 31.5% { -webkit-transform: 変換X(-3px) 回転Y(-5度);    変換：translateX（-3px）rotateY（-5deg）;  } 43.5% { -webkit-transform: 変換X(2px) 回転Y(3度);    変換:translateX(2px)rotateY(3deg);  } 50% { -webkit-transform:translateX(0);    変換:translateX(0);  }}@keyframes headShake { 0% { -webkit-transform:translateX(0);    変換:translateX(0);  } 6.5% { -webkit-transform: 変換X(-6px) 回転Y(-9度);    変換：translateX（-6px）rotateY（-9deg）;  } 18.5% { -webkit-transform: 変換 X(5px) 回転 Y(7 度);    変換：translateX(5px)rotateY(7deg);  } 31.5% { -webkit-transform: 変換X(-3px) 回転Y(-5度);    変換：translateX（-3px）rotateY（-5deg）;  } 43.5% { -webkit-transform: 変換X(2px) 回転Y(3度);    変換:translateX(2px)rotateY(3deg);  } 50% { -webkit-transform:translateX(0);    変換:translateX(0);  }}.headShake { -webkit-animation-timing-function: イーズインアウト;  アニメーション タイミング関数: イーズインアウト;  -webkit-アニメーション名: headShake;  アニメーション名: headShake;}@-webkit-keyframes スイング { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg);    変換：rotate3d(0, 0, 1, 15deg);  } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg);    変換：rotate3d(0, 0, 1, -10deg);  } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg);    変換：rotate3d(0, 0, 1, 5deg);  80% { -webkit-transform:rotate3d(0, 0, 1, -5deg);    変換：rotate3d(0, 0, 1, -5deg);  } から { -webkit-transform:rotate3d(0, 0, 1, 0deg);    変換：rotate3d(0, 0, 1, 0deg);  }}@keyframes スイング { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg);    変換：rotate3d(0, 0, 1, 15deg);  } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg);    変換：rotate3d(0, 0, 1, -10deg);  } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg);    変換：rotate3d(0, 0, 1, 5deg);  80% { -webkit-transform:rotate3d(0, 0, 1, -5deg);    変換：rotate3d(0, 0, 1, -5deg);  } から { -webkit-transform:rotate3d(0, 0, 1, 0deg);    変換：rotate3d(0, 0, 1, 0deg);  }}.swing { -webkit-transform-origin: 中央上部;  変換原点: 中央上部;  -webkit-アニメーション名: スイング;  アニメーション名:スイング;}@-webkit-keyframes tada { from { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  } 10%, 20% { -webkit-transform:scale3d(.9, .9, .9)rotate3d(0, 0, 1, -3deg);    変換:scale3d(.9, .9, .9)rotate3d(0, 0, 1, -3deg);  } 30%、50%、70%、90% { -webkit-transform:scale3d(1.1, 1.1, 1.1)rotate3d(0, 0, 1, 3deg);    変換：scale3d（1.1、1.1、1.1）rotate3d（0、0、1、3deg）;  } 40%、60%、80% { -webkit-transform:scale3d(1.1, 1.1, 1.1)rotate3d(0, 0, 1, -3deg);    変換：scale3d（1.1、1.1、1.1）rotate3d（0、0、1、-3deg）;  } から { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}@keyframes tada { from { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  } 10%, 20% { -webkit-transform:scale3d(.9, .9, .9)rotate3d(0, 0, 1, -3deg);    変換:scale3d(.9, .9, .9)rotate3d(0, 0, 1, -3deg);  } 30%、50%、70%、90% { -webkit-transform:scale3d(1.1, 1.1, 1.1)rotate3d(0, 0, 1, 3deg);    変換：scale3d（1.1、1.1、1.1）rotate3d（0、0、1、3deg）;  } 40%、60%、80% { -webkit-transform:scale3d(1.1, 1.1, 1.1)rotate3d(0, 0, 1, -3deg);    変換：scale3d（1.1、1.1、1.1）rotate3d（0、0、1、-3deg）;  } から { -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}.tada { -webkit アニメーション名: tada;  アニメーション名: tada;}/* もともと Nick Pettit によって作成されました - https://github.com/nickpettit/glide */@-webkit-keyframes wobble { from { -webkit-transform: none;    変換: なし。  } 15% { -webkit-transform:translate3d(-25%, 0, 0)rotate3d(0, 0, 1, -5deg);    変換：translate3d（-25％、0、0）rotate3d（0、0、1、-5deg）;  }30% { -webkit-transform: 変換 3d(20%, 0, 0) 回転 3d(0, 0, 1, 3deg);    変換：translate3d(20%, 0, 0)rotate3d(0, 0, 1, 3deg);  } 45% { -webkit-transform:translate3d(-15%, 0, 0)rotate3d(0, 0, 1, -3deg);    変換：translate3d（-15％、0、0）rotate3d（0、0、1、-3deg）;  } 60% { -webkit-transform:translate3d(10%, 0, 0)rotate3d(0, 0, 1, 2deg);    変換：translate3d(10%, 0, 0)rotate3d(0, 0, 1, 2deg);  } 75% { -webkit-transform:translate3d(-5%, 0, 0)rotate3d(0, 0, 1, -1deg);    変換：translate3d(-5%, 0, 0)rotate3d(0, 0, 1, -1deg);  } から { -webkit-transform: なし;    変換: なし。  }}@keyframes wobble { from { -webkit-transform: none;    変換: なし。  } 15% { -webkit-transform:translate3d(-25%, 0, 0)rotate3d(0, 0, 1, -5deg);    変換：translate3d（-25％、0、0）rotate3d（0、0、1、-5deg）;  } 30% { -webkit-transform: 変換3d(20%, 0, 0) 回転3d(0, 0, 1, 3deg);    変換：translate3d(20%, 0, 0)rotate3d(0, 0, 1, 3deg);  } 45% { -webkit-transform:translate3d(-15%, 0, 0)rotate3d(0, 0, 1, -3deg);    変換：translate3d（-15％、0、0）rotate3d（0、0、1、-3deg）;  } 60% { -webkit-transform:translate3d(10%, 0, 0)rotate3d(0, 0, 1, 2deg);    変換：translate3d(10%, 0, 0)rotate3d(0, 0, 1, 2deg);  } 75% { -webkit-transform:translate3d(-5%, 0, 0)rotate3d(0, 0, 1, -1deg);    変換：translate3d(-5%, 0, 0)rotate3d(0, 0, 1, -1deg);  } から { -webkit-transform: なし;    変換: なし。  }}.wobble { -webkit アニメーション名: ウォブル;  アニメーション名: ウォブル;}@-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none;    変換: なし。  } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);    変換: スキューX(-12.5度) スキューY(-12.5度);  } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg);    変換: スキューX(6.25度) スキューY(6.25度);  } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);    変換: スキューX(-3.125度) スキューY(-3.125度);  } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);    変換: スキューX(1.5625度) スキューY(1.5625度);  } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);    変換: スキューX(-0.78125度) スキューY(-0.78125度);  } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);    変換: スキューX(0.390625度) スキューY(0.390625度);  88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);    変換: スキューX(-0.1953125度) スキューY(-0.1953125度);  }}@keyframes jello { から、11.1%、から { -webkit-transform: none;    変換: なし。  } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);    変換: スキューX(-12.5度) スキューY(-12.5度);  } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg);    変換: スキューX(6.25度) スキューY(6.25度);  } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);    変換: スキューX(-3.125度) スキューY(-3.125度);  } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);    変換: スキューX(1.5625度) スキューY(1.5625度);  } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);    変換: スキューX(-0.78125度) スキューY(-0.78125度);  } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);    変換: スキューX(0.390625度) スキューY(0.390625度);  88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);    変換: スキューX(-0.1953125度) スキューY(-0.1953125度);  }}.jello { -webkit アニメーション名: jello;  アニメ名: ゼリー;  -webkit-transform-origin: センター;  変換元: センター;}@-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000 );    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } 0% { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  20% { -webkit-transform:scale3d(1.1, 1.1, 1.1);    変換:scale3d(1.1, 1.1, 1.1);  } 40% { -webkit-transform:scale3d(.9, .9, .9);    変換:scale3d(.9, .9, .9);  60% { 不透明度: 1;    -webkit-transform:scale3d(1.03, 1.03, 1.03);    変換:scale3d(1.03, 1.03, 1.03);  80% { -webkit-transform:scale3d(.97, .97, .97);    変換:scale3d(.97, .97, .97);  } から { 不透明度: 1;    -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } 0% { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  20% { -webkit-transform:scale3d(1.1, 1.1, 1.1);    変換:scale3d(1.1, 1.1, 1.1);  } 40% { -webkit-transform:scale3d(.9, .9, .9);    変換:scale3d(.9, .9, .9);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(1.03, 1.03, 1.03);    変換:scale3d(1.03, 1.03, 1.03);  }80% { -webkit-transform:scale3d(.97, .97, .97);    変換:scale3d(.97, .97, .97);  } から { 不透明度: 1;    -webkit-transform:scale3d(1, 1, 1);    変換:scale3d(1, 1, 1);  }}.bounceIn { -webkit アニメーション名: bounceIn;  アニメーション名: bounceIn;}@-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } 0% { 不透明度: 0;    -webkit-transform：translate3d(0, -3000px, 0);    変換：translate3d(0, -3000px, 0);  } 60% { 不透明度: 1;    -webkit-transform:translate3d(0, 25px, 0);    変換：translate3d(0, 25px, 0);  75% { -webkit-transform:translate3d(0, -10px, 0);    変換：translate3d(0, -10px, 0);  90% { -webkit-transform:translate3d(0, 5px, 0);    変換：translate3d(0, 5px, 0);  } から { -webkit-transform: なし;    変換: なし。  }}@keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } 0% { 不透明度: 0;    -webkit-transform：translate3d(0, -3000px, 0);    変換：translate3d(0, -3000px, 0);  } 60% { 不透明度: 1;    -webkit-transform:translate3d(0, 25px, 0);    変換：translate3d(0, 25px, 0);  75% { -webkit-transform:translate3d(0, -10px, 0);    変換：translate3d(0, -10px, 0);  90% { -webkit-transform:translate3d(0, 5px, 0);    変換：translate3d(0, 5px, 0);  } から { -webkit-transform: なし;    変換: なし。  }}.bounceInDown { -webkit アニメーション名: bounceInDown;  アニメーション名: bounceInDown;}@-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } 0% { 不透明度: 0;    -webkit-transform：translate3d(-3000px, 0, 0);    変換：translate3d(-3000px, 0, 0);  } 60% { 不透明度: 1;    -webkit-transform：translate3d(25px, 0, 0);    変換：translate3d(25px, 0, 0);  75% { -webkit-transform:translate3d(-10px, 0, 0);    変換：translate3d(-10px, 0, 0);  90% { -webkit-transform:translate3d(5px, 0, 0);    変換：translate3d(5px, 0, 0);  } から { -webkit-transform: なし;    変換: なし。  }}@keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } 0% { 不透明度: 0;    -webkit-transform：translate3d(-3000px, 0, 0);    変換：translate3d(-3000px, 0, 0);  } 60% { 不透明度: 1;    -webkit-transform：translate3d(25px, 0, 0);    変換：translate3d(25px, 0, 0);  75% { -webkit-transform:translate3d(-10px, 0, 0);    変換：translate3d(-10px, 0, 0);  90% { -webkit-transform:translate3d(5px, 0, 0);    変換：translate3d(5px, 0, 0);  } から { -webkit-transform: なし;    変換: なし。  }}.bounceInLeft { -webkit アニメーション名: bounceInLeft;  アニメーション名: bounceInLeft;}@-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } { 不透明度: 0; から    -webkit-transform：translate3d(3000px, 0, 0);    変換：translate3d(3000px, 0, 0);  } 60% { 不透明度: 1;    -webkit-transform：translate3d(-25px, 0, 0);    変換：translate3d(-25px, 0, 0);  75% { -webkit-transform:translate3d(10px, 0, 0);    変換：translate3d(10px, 0, 0);  90% { -webkit-transform:translate3d(-5px, 0, 0);    変換：translate3d(-5px, 0, 0);  } から { -webkit-transform: なし;    変換: なし。  }}@keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } { 不透明度: 0; から    -webkit-transform：translate3d(3000px, 0, 0);    変換：translate3d(3000px, 0, 0);  } 60% { 不透明度: 1;    -webkit-transform：translate3d(-25px, 0, 0);    変換：translate3d(-25px, 0, 0);  75% { -webkit-transform:translate3d(10px, 0, 0);    変換：translate3d(10px, 0, 0);  90% { -webkit-transform:translate3d(-5px, 0, 0);    変換：translate3d(-5px, 0, 0);  } から { -webkit-transform: なし;    変換: なし。  }}.bounceInRight { -webkit アニメーション名: bounceInRight;  アニメーション名: bounceInRight;}@-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } { 不透明度: 0; から    -webkit-transform:translate3d(0, 3000px, 0);    変換：translate3d(0, 3000px, 0);  }60% { 不透明度: 1;    -webkit-transform:translate3d(0, -20px, 0);    変換：translate3d(0, -20px, 0);  75% { -webkit-transform:translate3d(0, 10px, 0);    変換：translate3d(0, 10px, 0);  90% { -webkit-transform:translate3d(0, -5px, 0);    変換：translate3d(0, -5px, 0);  } から { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  }}@keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);    アニメーション タイミング関数: cubic-bezier(0.215, 0.610, 0.355, 1.000);  } { 不透明度: 0; から    -webkit-transform:translate3d(0, 3000px, 0);    変換：translate3d(0, 3000px, 0);  60% { 不透明度: 1;    -webkit-transform:translate3d(0, -20px, 0);    変換：translate3d(0, -20px, 0);  75% { -webkit-transform:translate3d(0, 10px, 0);    変換：translate3d(0, 10px, 0);  90% { -webkit-transform:translate3d(0, -5px, 0);    変換：translate3d(0, -5px, 0);  } から { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  }}.bounceInUp { -webkit アニメーション名: bounceInUp;  アニメーション名: bounceInUp;}@-webkit-keyframes bounceOut { 20% { -webkit-transform:scale3d(.9, .9, .9);    変換:scale3d(.9, .9, .9);  } 50%、55% { 不透明度: 1;    -webkit-transform:scale3d(1.1, 1.1, 1.1);    変換:scale3d(1.1, 1.1, 1.1);  } から { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  }}@keyframes bounceOut { 20% { -webkit-transform:scale3d(.9, .9, .9);    変換:scale3d(.9, .9, .9);  } 50%、55% { 不透明度: 1;    -webkit-transform:scale3d(1.1, 1.1, 1.1);    変換:scale3d(1.1, 1.1, 1.1);  } から { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  }}.bounceOut { -webkit アニメーション名: bounceOut;  アニメーション名: bounceOut;}@-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translation3d(0, 10px, 0);    変換：translate3d(0, 10px, 0);  } 40%、45% { 不透明度: 1;    -webkit-transform:translate3d(0, -20px, 0);    変換：translate3d(0, -20px, 0);  } から { 不透明度: 0;    -webkit-transform:translate3d(0, 2000px, 0);    変換：translate3d(0, 2000px, 0);  }}@keyframes bounceOutDown { 20% { -webkit-transform:translate3d(0, 10px, 0);    変換：translate3d(0, 10px, 0);  } 40%、45% { 不透明度: 1;    -webkit-transform:translate3d(0, -20px, 0);    変換：translate3d(0, -20px, 0);  } から { 不透明度: 0;    -webkit-transform:translate3d(0, 2000px, 0);    変換：translate3d(0, 2000px, 0);  }}.bounceOutDown { -webkit アニメーション名: bounceOutDown;  アニメーション名: bounceOutDown;}@-webkit-keyframes bounceOutLeft { 20% { 不透明度: 1;    -webkit-transform:translate3d(20px, 0, 0);    変換：translate3d(20px, 0, 0);  } から { 不透明度: 0;    -webkit-transform：translate3d(-2000px, 0, 0);    変換：translate3d(-2000px, 0, 0);  }}@keyframes bounceOutLeft { 20% { 不透明度: 1;    -webkit-transform:translate3d(20px, 0, 0);    変換：translate3d(20px, 0, 0);  } から { 不透明度: 0;    -webkit-transform：translate3d(-2000px, 0, 0);    変換：translate3d(-2000px, 0, 0);  }}.bounceOutLeft { -webkit アニメーション名: bounceOutLeft;  アニメーション名: bounceOutLeft;}@-webkit-keyframes bounceOutRight { 20% { 不透明度: 1;    -webkit-transform：translate3d(-20px, 0, 0);    変換：translate3d(-20px, 0, 0);  } から { 不透明度: 0;    -webkit-transform:translate3d(2000px, 0, 0);    変換：translate3d(2000px, 0, 0);  }}@keyframes bounceOutRight { 20% { 不透明度: 1;    -webkit-transform：translate3d(-20px, 0, 0);    変換：translate3d(-20px, 0, 0);  } から { 不透明度: 0;    -webkit-transform:translate3d(2000px, 0, 0);    変換：translate3d(2000px, 0, 0);  }}.bounceOutRight { -webkit アニメーション名: bounceOutRight;  アニメーション名: bounceOutRight;}@-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translation3d(0, -10px, 0);    変換：translate3d(0, -10px, 0);  } 40%、45% { 不透明度: 1;    -webkit-transform:translate3d(0, 20px, 0);    変換：translate3d(0, 20px, 0);  } から { 不透明度: 0;    -webkit-transform:translate3d(0, -2000px, 0);    変換：translate3d(0, -2000px, 0);  }}@keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0);    変換：translate3d(0, -10px, 0);  } 40%、45% { 不透明度: 1;    -webkit-transform:translate3d(0, 20px, 0);    変換：translate3d(0, 20px, 0);  } から { 不透明度: 0;    -webkit-transform:translate3d(0, -2000px, 0);    変換：translate3d(0, -2000px, 0);  }}.bounceOutUp { -webkit アニメーション名: bounceOutUp;  アニメーション名: bounceOutUp;}@-webkit-keyframes fadeIn { from { 不透明度: 0;  } から { 不透明度: 1;  }}@keyframes fadeIn { from { 不透明度: 0;  } から { 不透明度: 1;  }}.fadeIn { -webkit アニメーション名: fadeIn;  アニメーション名: フェードイン;}@-webkit-keyframes fadeInDown { from { 不透明度: 0;    -webkit-transform:translate3d(0, -100%, 0);    変換:translate3d(0, -100%, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInDown { from { 不透明度: 0;    -webkit-transform:translate3d(0, -100%, 0);    変換:translate3d(0, -100%, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInDown { -webkit アニメーション名: fadeInDown;  アニメーション名: fadeInDown;}@-webkit-keyframes fadeInDownBig { from { 不透明度: 0;    -webkit-transform:translate3d(0, -2000px, 0);    変換：translate3d(0, -2000px, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInDownBig { from { 不透明度: 0;    -webkit-transform:translate3d(0, -2000px, 0);    変換：translate3d(0, -2000px, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInDownBig { -webkit アニメーション名: fadeInDownBig;  アニメーション名: fadeInDownBig;}@-webkit-keyframes fadeInLeft { from { 不透明度: 0;    -webkit-transform:translate3d(-100%, 0, 0);    変換:translate3d(-100%, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInLeft { from { 不透明度: 0;    -webkit-transform:translate3d(-100%, 0, 0);    変換:translate3d(-100%, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInLeft { -webkit アニメーション名: fadeInLeft;  アニメーション名: fadeInLeft;}@-webkit-keyframes fadeInLeftBig { from { 不透明度: 0;    -webkit-transform：translate3d(-2000px, 0, 0);    変換：translate3d(-2000px, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInLeftBig { from { 不透明度: 0;    -webkit-transform：translate3d(-2000px, 0, 0);    変換：translate3d(-2000px, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInLeftBig { -webkit アニメーション名: fadeInLeftBig;  アニメーション名: fadeInLeftBig;}@-webkit-keyframes fadeInRight { from { 不透明度: 0;    -webkit-transform:translate3d(100%, 0, 0);    変換:translate3d(100%, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInRight { from { 不透明度: 0;    -webkit-transform:translate3d(100%, 0, 0);    変換:translate3d(100%, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInRight { -webkit アニメーション名: fadeInRight;  アニメーション名: fadeInRight;}@-webkit-keyframes fadeInRightBig { from { 不透明度: 0;    -webkit-transform:translate3d(2000px, 0, 0);    変換：translate3d(2000px, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInRightBig { from { 不透明度: 0;    -webkit-transform:translate3d(2000px, 0, 0);    変換：translate3d(2000px, 0, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInRightBig { -webkit アニメーション名: fadeInRightBig;  アニメーション名: fadeInRightBig;}@-webkit-keyframes fadeInUp { from { 不透明度: 0;    -webkit-transform:translate3d(0, 100%, 0);    変換:translate3d(0, 100%, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInUp { from { 不透明度: 0;    -webkit-transform:translate3d(0, 100%, 0);    変換:translate3d(0, 100%, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInUp { -webkit アニメーション名: fadeInUp;  アニメーション名: fadeInUp;}@-webkit-keyframes fadeInUpBig { from { 不透明度: 0;    -webkit-transform:translate3d(0, 2000px, 0);    変換：translate3d(0, 2000px, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes fadeInUpBig { from { 不透明度: 0;    -webkit-transform:translate3d(0, 2000px, 0);    変換：translate3d(0, 2000px, 0);  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.fadeInUpBig { -webkit アニメーション名: fadeInUpBig;  アニメーション名: fadeInUpBig;}@-webkit-keyframes fadeOut { from { 不透明度: 1;  } から { 不透明度: 0;  }}@keyframes fadeOut { from { 不透明度: 1;  } から { 不透明度: 0;  }}.fadeOut { -webkit アニメーション名: fadeOut;  アニメーション名: fadeOut;}@-webkit-keyframes fadeOutDown { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, 100%, 0);    変換:translate3d(0, 100%, 0);  }}@keyframes fadeOutDown { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, 100%, 0);    変換:translate3d(0, 100%, 0);  }}.fadeOutDown { -webkit アニメーション名: fadeOutDown;  アニメーション名: fadeOutDown;}@-webkit-keyframes fadeOutDownBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, 2000px, 0);    変換：translate3d(0, 2000px, 0);  }}@keyframes fadeOutDownBig { from { 不透明度: 1;  }から { 不透明度: 0;    -webkit-transform:translate3d(0, 2000px, 0);    変換：translate3d(0, 2000px, 0);  }}.fadeOutDownBig { -webkit アニメーション名: fadeOutDownBig;  アニメーション名: fadeOutDownBig;}@-webkit-keyframes fadeOutLeft { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(-100%, 0, 0);    変換:translate3d(-100%, 0, 0);  }}@keyframes fadeOutLeft { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(-100%, 0, 0);    変換:translate3d(-100%, 0, 0);  }}.fadeOutLeft { -webkit アニメーション名: fadeOutLeft;  アニメーション名: fadeOutLeft;}@-webkit-keyframes fadeOutLeftBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform：translate3d(-2000px, 0, 0);    変換：translate3d(-2000px, 0, 0);  }}@keyframes fadeOutLeftBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform：translate3d(-2000px, 0, 0);    変換：translate3d(-2000px, 0, 0);  }}.fadeOutLeftBig { -webkit アニメーション名: fadeOutLeftBig;  アニメーション名: fadeOutLeftBig;}@-webkit-keyframes fadeOutRight { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(100%, 0, 0);    変換:translate3d(100%, 0, 0);  }}@keyframes fadeOutRight { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(100%, 0, 0);    変換:translate3d(100%, 0, 0);  }}.fadeOutRight { -webkit アニメーション名: fadeOutRight;  アニメーション名: fadeOutRight;}@-webkit-keyframes fadeOutRightBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(2000px, 0, 0);    変換：translate3d(2000px, 0, 0);  }}@keyframes fadeOutRightBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(2000px, 0, 0);    変換：translate3d(2000px, 0, 0);  }}.fadeOutRightBig { -webkit アニメーション名: fadeOutRightBig;  アニメーション名: fadeOutRightBig;}@-webkit-keyframes fadeOutUp { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, -100%, 0);    変換:translate3d(0, -100%, 0);  }}@keyframes fadeOutUp { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, -100%, 0);    変換:translate3d(0, -100%, 0);  }}.fadeOutUp { -webkit アニメーション名: fadeOutUp;  アニメーション名: fadeOutUp;}@-webkit-keyframes fadeOutUpBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, -2000px, 0);    変換：translate3d(0, -2000px, 0);  }}@keyframes fadeOutUpBig { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform:translate3d(0, -2000px, 0);    変換：translate3d(0, -2000px, 0);  }}.fadeOutUpBig { -webkit アニメーション名: fadeOutUpBig;  アニメーション名: fadeOutUpBig;}@-webkit-keyframes lip { from { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -360deg);    変換: 視点(400px) 回転3d(0, 1, 0, -360度);    -webkit-animation-timing-function: イーズアウト;    アニメーション タイミング関数: イーズアウト;  } 40% { -webkit-transform:perspective(400px)translate3d(0,0,150px)rotate3d(0,1,0,-190deg);    変換：perspective(400px)translate3d(0, 0, 150px)rotate3d(0, 1, 0, -190deg);    -webkit-animation-timing-function: イーズアウト;    アニメーション タイミング関数: イーズアウト;  } 50% { -webkit-transform:perspective(400px)translate3d(0,0,150px)rotate3d(0,1,0,-170deg);    変換：perspective(400px)translate3d(0, 0, 150px)rotate3d(0, 1, 0, -170deg);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  80% { -webkit-transform: パースペクティブ(400px) スケール 3d(.95, .95, .95);    変換: パースペクティブ(400px) スケール 3d(.95, .95, .95);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  } から { -webkit-transform: パースペクティブ(400px);    変換: パースペクティブ(400px);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  }}@keyframes 反転 { from { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -360deg);    変換: 視点(400px) 回転3d(0, 1, 0, -360度);    -webkit-animation-timing-function: イーズアウト;    アニメーション タイミング関数: イーズアウト;  } 40% { -webkit-transform:perspective(400px)translate3d(0,0,150px)rotate3d(0,1,0,-190deg);    変換：perspective(400px)translate3d(0, 0, 150px)rotate3d(0, 1, 0, -190deg);    -webkit-animation-timing-function: イーズアウト;    アニメーション タイミング関数: イーズアウト;  } 50% { -webkit-transform:perspective(400px)translate3d(0,0,150px)rotate3d(0,1,0,-170deg);    変換：perspective(400px)translate3d(0, 0, 150px)rotate3d(0, 1, 0, -170deg);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  80% { -webkit-transform: パースペクティブ(400px) スケール 3d(.95, .95, .95);    変換: パースペクティブ(400px) スケール 3d(.95, .95, .95);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  }{ -webkit-transform: パースペクティブ(400px); に    変換: パースペクティブ(400px);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  }}.animated.flip { -webkit-backface-visibility: 表示;  背面可視性: 可視;  -webkit-アニメーション名: フリップ;  アニメーション名：flip;}@-webkit-keyframes flipInX { from { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, 90deg);    変換: 視点(400px) 回転3d(1, 0, 0, 90度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;    不透明度: 0;  } 40% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, -20deg);    変換: 視点(400px) 回転3d(1, 0, 0, -20度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  60% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, 10deg);    変換: 視点(400px) 回転3d(1, 0, 0, 10deg);    不透明度: 1;  80% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, -5deg);    変換: パースペクティブ(400px) 回転 3d(1, 0, 0, -5deg);  } から { -webkit-transform: パースペクティブ(400px);    変換: パースペクティブ(400px);  }}@keyframes lipInX { from { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, 90deg);    変換: 視点(400px) 回転3d(1, 0, 0, 90度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;    不透明度: 0;  } 40% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, -20deg);    変換: 視点(400px) 回転3d(1, 0, 0, -20度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  60% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, 10deg);    変換: 視点(400px) 回転3d(1, 0, 0, 10deg);    不透明度: 1;  80% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, -5deg);    変換: パースペクティブ(400px) 回転 3d(1, 0, 0, -5deg);  } から { -webkit-transform: パースペクティブ(400px);    変換: パースペクティブ(400px);  }}.flipInX { -webkit-backface-visibility: 表示されます !重要;  背面の可視性: 表示されます!重要;  -webkit アニメーション名:flipInX;  アニメーション名:flipInX;}@-webkit-keyframesflipInY { from { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, 90deg);    変換: 視点(400px) 回転3d(0, 1, 0, 90度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;    不透明度: 0;  } 40% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -20deg);    変換: 視点(400px) 回転3d(0, 1, 0, -20度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  60% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, 10deg);    変換: 視点(400px) 回転3d(0, 1, 0, 10deg);    不透明度: 1;  80% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -5deg);    変換: 視点(400px) 回転3d(0, 1, 0, -5deg);  } から { -webkit-transform: パースペクティブ(400px);    変換: パースペクティブ(400px);  }}@keyframes lipInY { from { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, 90deg);    変換: 視点(400px) 回転3d(0, 1, 0, 90度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;    不透明度: 0;  } 40% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -20deg);    変換: 視点(400px) 回転3d(0, 1, 0, -20度);    -webkit-animation-timing-function: easy-in;    アニメーション タイミング関数: イーズイン;  60% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, 10deg);    変換: 視点(400px) 回転3d(0, 1, 0, 10deg);    不透明度: 1;  80% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -5deg);    変換: パースペクティブ(400px) 回転 3d(0, 1, 0, -5deg);  } から { -webkit-transform: パースペクティブ(400px);    変換: パースペクティブ(400px);  }}.flipInY { -webkit-backface-visibility: 表示されます !重要;  背面の可視性: 表示されます!重要;  -webkitアニメーション名:flipInY;  アニメーション名:flipInY;}@-webkit-keyframesflipOutX { from { -webkit-transform:perspective(400px);    変換: パースペクティブ(400px);  30% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, -20deg);    変換: 視点(400px) 回転3d(1, 0, 0, -20度);    不透明度: 1;  } to { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, 90deg);    変換: 視点(400px) 回転3d(1, 0, 0, 90度);    不透明度: 0;  }}@keyframes flipOutX { from { -webkit-transform:perspective(400px);    変換: パースペクティブ(400px);  30% { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, -20deg);    変換: 視点(400px) 回転3d(1, 0, 0, -20度);    不透明度: 1;  } to { -webkit-transform:perspective(400px)rotate3d(1, 0, 0, 90deg);    変換: 視点(400px) 回転3d(1, 0, 0, 90度);    不透明度: 0;  }}.flipOutX { -webkit アニメーション名:flipOutX;  アニメーション名:flipOutX;  -webkit-backface-visibility: 表示されます!重要;  backface-visibility: 表示されます !重要;}@-webkit-keyframes lipOutY { from { -webkit-transform:perspective(400px);    変換: パースペクティブ(400px);  } 30% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -15deg);    変換: 視点(400px) 回転3d(0, 1, 0, -15deg);    不透明度: 1;  } to { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, 90deg);    変換: 視点(400px) 回転3d(0, 1, 0, 90度);    不透明度: 0;  }}@keyframes lipOutY { from { -webkit-transform:perspective(400px);    変換: パースペクティブ(400px);  } 30% { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, -15deg);    変換: 視点(400px) 回転3d(0, 1, 0, -15deg);    不透明度: 1;  } to { -webkit-transform:perspective(400px)rotate3d(0, 1, 0, 90deg);    変換: 視点(400px) 回転3d(0, 1, 0, 90度);    不透明度: 0;  }}.flipOutY { -webkit-backface-visibility: 表示されます !重要;  背面の可視性: 表示されます!重要;  -webkit-アニメーション名:flipOutY;  アニメーション名:flipOutY;}@-webkit-keyframes lightSpeedIn { from { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);    変換:translate3d(100%, 0, 0) skewX(-30deg);    不透明度: 0;  60% { -webkit-transform: skewX(20deg);    変換: スキュー X(20 度);    不透明度: 1;  80% { -webkit-transform: skewX(-5deg);    変換: skewX(-5deg);    不透明度: 1;  } から { -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}@keyframes lightSpeedIn { from { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);    変換:translate3d(100%, 0, 0) skewX(-30deg);    不透明度: 0;  60% { -webkit-transform: skewX(20deg);    変換: スキュー X(20 度);    不透明度: 1;  80% { -webkit-transform: skewX(-5deg);    変換: skewX(-5deg);    不透明度: 1;  } から { -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}.lightSpeedIn { -webkit アニメーション名: lightSpeedIn;  アニメーション名: lightSpeedIn;  -webkit-animation-timing-function: イーズアウト;  アニメーション タイミング関数:ease-out;}@-webkit-keyframes lightSpeedOut { from { 不透明度: 1;  } to { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg);    変換:translate3d(100%, 0, 0) skewX(30deg);    不透明度: 0;  }}@keyframes lightSpeedOut { from { 不透明度: 1;  } to { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg);    変換:translate3d(100%, 0, 0) skewX(30deg);    不透明度: 0;  }}.lightSpeedOut { -webkit アニメーション名: lightSpeedOut;  アニメーション名: lightSpeedOut;  -webkit-animation-timing-function: easy-in;  アニメーション タイミング関数:ease-in;}@-webkit-keyframesrotateIn { from { -webkit-transform-origin: center;    変換原点: 中心;    -webkit-transform:rotate3d(0, 0, 1, -200deg);    変換：rotate3d(0, 0, 1, -200deg);    不透明度: 0;  } から { -webkit-transform-origin: center;    変換原点: 中心;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}@keyframesrotateIn { from { -webkit-transform-origin: center;    変換原点: 中心;    -webkit-transform:rotate3d(0, 0, 1, -200deg);    変換：rotate3d(0, 0, 1, -200deg);    不透明度: 0;  } から { -webkit-transform-origin: center;    変換原点: 中心;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}.rotateIn { -webkit アニメーション名:rotateIn;  アニメーション名:rotateIn;}@-webkit-keyframesrotateInDownLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, -45deg);    変換：rotate3d(0, 0, 1, -45deg);    不透明度: 0;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}@keyframesrotateInDownLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, -45deg);    変換：rotate3d(0, 0, 1, -45deg);    不透明度: 0;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}.rotateInDownLeft { -webkit アニメーション名:rotateInDownLeft;  アニメーション名:rotateInDownLeft;}@-webkit-keyframesrotateInDownRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, 45deg);    変換：rotate3d(0, 0, 1, 45deg);    不透明度: 0;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}@keyframesrotateInDownRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, 45deg);    変換：rotate3d(0, 0, 1, 45deg);    不透明度: 0;  }{ -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}.rotateInDownRight { -webkit アニメーション名:rotateInDownRight;  アニメーション名:rotateInDownRight;}@-webkit-keyframesrotateInUpLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, 45deg);    変換：rotate3d(0, 0, 1, 45deg);    不透明度: 0;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}@keyframesrotateInUpLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, 45deg);    変換：rotate3d(0, 0, 1, 45deg);    不透明度: 0;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}.rotateInUpLeft { -webkit アニメーション名:rotateInUpLeft;  アニメーション名:rotateInUpLeft;}@-webkit-keyframesrotateInUpRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, -90deg);    変換：rotate3d(0, 0, 1, -90deg);    不透明度: 0;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}@keyframesrotateInUpRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, -90deg);    変換：rotate3d(0, 0, 1, -90deg);    不透明度: 0;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform: なし;    変換: なし。    不透明度: 1;  }}.rotateInUpRight { -webkit アニメーション名:rotateInUpRight;  アニメーション名:rotateInUpRight;}@-webkit-keyframesrotateOut { from { -webkit-transform-origin: center;    変換原点: 中心;    不透明度: 1;  } から { -webkit-transform-origin: center;    変換原点: 中心;    -webkit-transform:rotate3d(0, 0, 1, 200deg);    変換：rotate3d(0, 0, 1, 200deg);    不透明度: 0;  }}@keyframesrotateOut { from { -webkit-transform-origin: center;    変換原点: 中心;    不透明度: 1;  } から { -webkit-transform-origin: center;    変換原点: 中心;    -webkit-transform:rotate3d(0, 0, 1, 200deg);    変換：rotate3d(0, 0, 1, 200deg);    不透明度: 0;  }}.rotateOut { -webkit アニメーション名:rotateOut;  アニメーション名:rotateOut;}@-webkit-keyframesrotateOutDownLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    不透明度: 1;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, 45deg);    変換：rotate3d(0, 0, 1, 45deg);    不透明度: 0;  }}@keyframesrotateOutDownLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    不透明度: 1;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, 45deg);    変換：rotate3d(0, 0, 1, 45deg);    不透明度: 0;  }}.rotateOutDownLeft { -webkit アニメーション名:rotateOutDownLeft;  アニメーション名:rotateOutDownLeft;}@-webkit-keyframesrotateOutDownRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    不透明度: 1;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, -45deg);    変換：rotate3d(0, 0, 1, -45deg);    不透明度: 0;  }}@keyframesrotateOutDownRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    不透明度: 1;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, -45deg);    変換：rotate3d(0, 0, 1, -45deg);    不透明度: 0;  }}.rotateOutDownRight { -webkit アニメーション名:rotateOutDownRight;  アニメーション名:rotateOutDownRight;}@-webkit-keyframesrotateOutUpLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    不透明度: 1;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, -45deg);    変換：rotate3d(0, 0, 1, -45deg);    不透明度: 0;  }}@keyframesrotateOutUpLeft { from { -webkit-transform-origin: 左下;    変換原点: 左下;    不透明度: 1;  } から { -webkit-transform-origin: 左下;    変換原点: 左下;    -webkit-transform:rotate3d(0, 0, 1, -45deg);    変換：rotate3d(0, 0, 1, -45deg);    不透明度: 0;  }}.rotateOutUpLeft { -webkit アニメーション名:rotateOutUpLeft;  アニメーション名:rotateOutUpLeft;}@-webkit-keyframesrotateOutUpRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    不透明度: 1;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, 90deg);    変換：rotate3d(0, 0, 1, 90deg);    不透明度: 0;  }}@keyframesrotateOutUpRight { from { -webkit-transform-origin: 右下;    変換元: 右下;    不透明度: 1;  } から { -webkit-transform-origin: 右下;    変換元: 右下;    -webkit-transform:rotate3d(0, 0, 1, 90deg);    変換：rotate3d(0, 0, 1, 90deg);    不透明度: 0;  }}.rotateOutUpRight { -webkit アニメーション名:rotateOutUpRight;  アニメーション名:rotateOutUpRight;}@-webkit-keyframes ヒンジ { 0% { -webkit-transform-origin: 左上;    変換原点: 左上;    -webkit-animation-timing-function: イーズインアウト;    アニメーション タイミング関数: イーズインアウト;  } 20%, 60% { -webkit-transform:rotate3d(0, 0, 1, 80deg);    変換：rotate3d(0, 0, 1, 80deg);    -webkit-transform-origin: 左上;    変換原点: 左上;    -webkit-animation-timing-function: イーズインアウト;    アニメーション タイミング関数: イーズインアウト;  } 40%, 80% { -webkit-transform:rotate3d(0, 0, 1, 60deg);    変換：rotate3d(0, 0, 1, 60deg);    -webkit-transform-origin: 左上;    変換原点: 左上;    -webkit-animation-timing-function: イーズインアウト;    アニメーション タイミング関数: イーズインアウト;    不透明度: 1;  } から { -webkit-transform:translate3d(0, 700px, 0);    変換：translate3d(0, 700px, 0);    不透明度: 0;  }}@keyframes ヒンジ { 0% { -webkit-transform-origin: 左上;    変換原点: 左上;    -webkit-animation-timing-function: イーズインアウト;    アニメーション タイミング関数: イーズインアウト;  } 20%, 60% { -webkit-transform:rotate3d(0, 0, 1, 80deg);    変換：rotate3d(0, 0, 1, 80deg);    -webkit-transform-origin: 左上;    変換原点: 左上;    -webkit-animation-timing-function: イーズインアウト;    アニメーション タイミング関数: イーズインアウト;  } 40%, 80% { -webkit-transform:rotate3d(0, 0, 1, 60deg);    変換：rotate3d(0, 0, 1, 60deg);    -webkit-transform-origin: 左上;    変換原点: 左上;    -webkit-animation-timing-function: イーズインアウト;    アニメーション タイミング関数: イーズインアウト;    不透明度: 1;  } から { -webkit-transform:translate3d(0, 700px, 0);    変換：translate3d(0, 700px, 0);    不透明度: 0;  }}.hinge { -webkit アニメーション名: ヒンジ;  アニメーション名: ヒンジ;}/* 当初の作成者は Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes rollIn { from { opacity: 0;    -webkit-transform：translate3d(-100%, 0, 0)rotate3d(0, 0, 1, -120deg);    変換：translate3d（-100％、0、0）rotate3d（0、0、1、-120度）;  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}@keyframes rollIn { from { 不透明度: 0;    -webkit-transform：translate3d(-100%, 0, 0)rotate3d(0, 0, 1, -120deg);    変換：translate3d（-100％、0、0）rotate3d（0、0、1、-120度）;  } から { 不透明度: 1;    -webkit-transform: なし;    変換: なし。  }}.rollIn { -webkit アニメーション名: rollIn;  アニメーション名: rollIn;}/* 当初の作成者は Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes rollOut { from { opacity: 1;  } から { 不透明度: 0;    -webkit-transform：translate3d（100%, 0, 0）rotate3d（0, 0, 1, 120deg）;    変換：translate3d（100％、0、0）rotate3d（0、0、1、120度）;  }}@keyframes rollOut { from { 不透明度: 1;  } から { 不透明度: 0;    -webkit-transform：translate3d（100%, 0, 0）rotate3d（0, 0, 1, 120deg）;    変換：translate3d（100％、0、0）rotate3d（0、0、1、120度）;  }}.rollOut { -webkit アニメーション名: rollOut;  アニメーション名: rollOut;}@-webkit-keyframeszoomIn { from { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  } 50% { 不透明度: 1;  }}@keyframeszoomIn { from { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  } 50% { 不透明度: 1;  }}.zoomIn { -webkit アニメーション名:zoomIn;  アニメーション名:zoomIn;}@-webkit-keyframeszoomInDown { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（0、-1000px、0）;    変換：scale3d（.1、.1、.1）translate3d（0、-1000px、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    変換：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}@keyframeszoomInDown { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（0、-1000px、0）;    変換：scale3d（.1、.1、.1）translate3d（0、-1000px、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    変換：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}.zoomInDown { -webkit アニメーション名:zoomInDown;  アニメーション名:zoomInDown;}@-webkit-keyframeszoomInLeft { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（-1000px、0、0）;    変換：scale3d（.1、.1、.1）translate3d（-1000px、0、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(10px, 0, 0);    変換:scale3d(.475, .475, .475)translate3d(10px, 0, 0);    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}@keyframeszoomInLeft { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（-1000px、0、0）;    変換：scale3d（.1、.1、.1）translate3d（-1000px、0、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(10px, 0, 0);    変換:scale3d(.475, .475, .475)translate3d(10px, 0, 0);    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}.zoomInLeft { -webkit アニメーション名:zoomInLeft;  アニメーション名:zoomInLeft;}@-webkit-keyframeszoomInRight { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（1000px、0、0）;    変換：scale3d（.1、.1、.1）translate3d（1000px、0、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(-10px, 0, 0);    変換：scale3d（.475、.475、.475）translate3d（-10px、0、0）;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}@keyframeszoomInRight { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（1000px、0、0）;    変換：scale3d（.1、.1、.1）translate3d（1000px、0、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(-10px, 0, 0);    変換：scale3d（.475、.475、.475）translate3d（-10px、0、0）;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}.zoomInRight { -webkit-アニメーション名:zoomInRight;  アニメーション名:zoomInRight;}@-webkit-keyframeszoomInUp { from { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（0、1000px、0）;    変換：scale3d（.1、.1、.1）translate3d（0、1000px、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(0, -60px, 0);    変換：scale3d（.475、.475、.475）translate3d（0、-60px、0）;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}@keyframeszoomInUp { from { 不透明度: 0;    -webkit-transform:scale3d(.1, .1, .1) translation3d(0, 1000px, 0);    変換：scale3d（.1、.1、.1）translate3d（0、1000px、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } 60% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(0, -60px, 0);    変換：scale3d（.475、.475、.475）translate3d（0、-60px、0）;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}.zoomInUp { -webkit-アニメーション名:zoomInUp;  アニメーション名:zoomInUp;}@-webkit-keyframeszoomOut { from { 不透明度: 1;  } 50% { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  }から { 不透明度: 0;  }}@keyframeszoomOut { from { 不透明度: 1;  } 50% { 不透明度: 0;    -webkit-transform:scale3d(.3, .3, .3);    変換:scale3d(.3, .3, .3);  } から { 不透明度: 0;  }}.zoomOut { -webkit アニメーション名:zoomOut;  アニメーション名:zoomOut;}@-webkit-keyframeszoomOutDown { 40% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(0, -60px, 0);    変換：scale3d（.475、.475、.475）translate3d（0、-60px、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } から { 不透明度: 0;    -webkit-transform:scale3d(.1, .1, .1) translation3d(0, 2000px, 0);    変換:scale3d(.1, .1, .1)translate3d(0, 2000px, 0);    -webkit-transform-origin: 中央下;    変換原点: 中央下;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}@keyframeszoomOutDown { 40% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(0, -60px, 0);    変換：scale3d（.475、.475、.475）translate3d（0、-60px、0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } から { 不透明度: 0;    -webkit-transform:scale3d(.1, .1, .1) translation3d(0, 2000px, 0);    変換:scale3d(.1, .1, .1)translate3d(0, 2000px, 0);    -webkit-transform-origin: 中央下;    変換原点: 中央下;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}.zoomOutDown { -webkit アニメーション名:zoomOutDown;  アニメーション名:zoomOutDown;}@-webkit-keyframeszoomOutLeft { 40% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(42px, 0, 0);    変換：scale3d（.475、.475、.475）translate3d（42px、0、0）;  } から { 不透明度: 0;    -webkit-transform:scale(.1)translate3d(-2000px, 0, 0);    変換:scale(.1)translate3d(-2000px, 0, 0);    -webkit-transform-origin: 左中央;    変換原点: 左中央;  }}@keyframeszoomOutLeft { 40% { 不透明度: 1;    -webkit-transform:scale3d(.475, .475, .475) translation3d(42px, 0, 0);    変換：scale3d（.475、.475、.475）translate3d（42px、0、0）;  } から { 不透明度: 0;    -webkit-transform:scale(.1)translate3d(-2000px, 0, 0);    変換:scale(.1)translate3d(-2000px, 0, 0);    -webkit-transform-origin: 左中央;    変換原点: 左中央;  }}.zoomOutLeft { -webkit アニメーション名:zoomOutLeft;  アニメーション名:zoomOutLeft;}@-webkit-keyframeszoomOutRight { 40% { 不透明度: 1;    -webkit-transform：scale3d（.475、.475、.475）translate3d（-42px、0、0）;    変換：scale3d（.475、.475、.475）translate3d（-42px、0、0）;  } から { 不透明度: 0;    -webkit-transform:scale(.1)translate3d(2000px, 0, 0);    変換:scale(.1)translate3d(2000px, 0, 0);    -webkit-transform-origin: 右中央;    変換原点: 右中央;  }}@keyframeszoomOutRight { 40% { 不透明度: 1;    -webkit-transform：scale3d（.475、.475、.475）translate3d（-42px、0、0）;    変換：scale3d（.475、.475、.475）translate3d（-42px、0、0）;  } から { 不透明度: 0;    -webkit-transform:scale(.1)translate3d(2000px, 0, 0);    変換:scale(.1)translate3d(2000px, 0, 0);    -webkit-transform-origin: 右中央;    変換原点: 右中央;  }}.zoomOutRight { -webkit-アニメーション名:zoomOutRight;  アニメーション名:zoomOutRight;}@-webkit-keyframeszoomOutUp { 40% { 不透明度: 1;    -webkit-transform：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    変換：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  } から { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（0、-2000px、0）;    変換：scale3d（.1、.1、.1）translate3d（0、-2000px、0）;    -webkit-transform-origin: 中央下;    変換原点: 中央下;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}@keyframeszoomOutUp { 40% { 不透明度: 1;    -webkit-transform：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    変換：scale3d（.475, .475, .475）translate3d（0, 60px, 0）;    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);    アニメーション タイミング関数: cubic-bezier(0.550, 0.055, 0.675, 0.190);  }から { 不透明度: 0;    -webkit-transform：scale3d（.1、.1、.1）translate3d（0、-2000px、0）;    変換：scale3d（.1、.1、.1）translate3d（0、-2000px、0）;    -webkit-transform-origin: 中央下;    変換原点: 中央下;    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);    アニメーション タイミング関数: cubic-bezier(0.175, 0.885, 0.320, 1);  }}.zoomOutUp { -webkit アニメーション名:zoomOutUp;  アニメーション名:zoomOutUp;}@-webkit-keyframes slideInDown { from { -webkit-transform:translate3d(0, -100%, 0);    変換:translate3d(0, -100%, 0);    可視性: 可視;  } から { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  }}@keyframes slideInDown { from { -webkit-transform:translate3d(0, -100%, 0);    変換:translate3d(0, -100%, 0);    可視性: 可視;  } から { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  }}.slideInDown { -webkit アニメーション名: slideInDown;  アニメーション名: slideInDown;}@-webkit-keyframes slideInLeft { from { -webkit-transform:translate3d(-100%, 0, 0);    変換:translate3d(-100%, 0, 0);    可視性: 可視;  } から { -webkit-transform:translate3d(0, 0, 0);    変換：translate3d(0, 0, 0);  }}@keyframes slideInLeft { from { -webkit-transform:translate3d(-100%, 0, 0);    変換:translate3d(-100%, 0, 0);    可視性: 可視;  } から { -webkit-transform:translate3d(0, 0, 0);    変換: t