?? ? ????? ???? ???? ??? ?? CSS3 ?? ?? ??? ?????? CSS3? ?? ????? ?? ?????.

<??>
<meta charset="utf-8">
<title>css3貓掛線球上左右搖擺動畫特效</title>

<???>
.?? ?? {
? -webkit-animation: bob 7s ??-???(0.5, 0, 0.5, 1) ? ? ??;
? ? ? ? ? ?????: bob 7s ??-???(0.5, 0, 0.5, 1) ? ? ??;
}

.?? {
? ??: 10rem;
? ??: ??(50% - 2.5rem);
? ??: ??;
? ??: 5rem;
? ?: 5rem;
? -webkit-transform-origin: ?? -20rem;
? ? ? ? ? ??-??: ?? -20rem;
? -webkit-animation: 7s ?? ???(0.5, 0, 0.5, 1) ?? ?? ??;
? ? ? ? ? ?????: 7s ?? ???(0.5, 0, 0.5, 1) ?? ?? ??;
}
.all:?? {
? ?: 20rem;
? ??: 2px;
? ???: #DB242A;
? ??: ??(50% - 1px);
? ??: 20rem;
}

.? {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 80px;
? ??: 80px;
? ??? ??: 50%;
? ?? ???: -webkit-radial-gradient(?? ??, ?, #e97c7f, #db242a 50%, #af1d22);
? ?? ???: ??? ?????(?? ?? ?, #e97c7f, #db242a 50%, #af1d22);
? Z-??: 1;
}
.yarn:??, .yarn:?? {
? ??: ??;
? ??: 20px;
? ??: 20px;
? ??? ??: 50%;
? ???: ??;
? ??: -1px;
}
.yarn:?? {
? ??: ??(50% + 7px);
? ???: #b1bce6;
}
.yarn:?? {
? ???: calc(50% + 7px);
? ???: #D5E8F8;
}

.cat-? {
? ??: ??;
? ??: 0;
? ??: ??(50% - 45px);
? ??: 90px;
? ??: 130px;
? -webkit-animation: ??? ?? 7s ?? ???(0.5, 0, 0.5, 1) ? ? ??;
? ? ? ? ? ?????: ??? ?? 7s ?? ???(0.5, 0, 0.5, 1) ? ? ??;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
}

.cat {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 100%;
? ??: 100%;
? -webkit-animation: 7? 0.2? ?? ?? ??;
? ? ? ? ? ?????: ?? 7? 0.2? ?? ??;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
}

.cat-upper {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 100%;
? ??: 100%;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
? Z-??: 1;
}
.cat-upper .cat-leg {
? ??: ??;
? ??: 20px;
? ??: 100%;
? ???: ??;
? Z-??: -1;
? ?? ???: -webkit-linear-gradient(??, #D5E8F8, #D5E8F8 20%, #8B9BD9);
? ?? ???: ?? ?????(?????, #D5E8F8, #D5E8F8 20%, #8B9BD9);
}
.cat-upper .cat-leg:nth-child(1) {
? ??? ?? ?? ??: 100px;
? ??: 10px;
}
.cat-upper .cat-leg:nth-child(1):?? {
? ??: 50%;
}
.cat-upper .cat-leg:nth-child(2) {
? ???-?? ?? ??: 0;
? ??? ??? ?? ??: 100px;
? ???: 10px;
}
.cat-upper .cat-leg:nth-child(2):?? {
? ???: 50%;
}

.cat-lower-wrap {
? ??: 90%;
? ??: 100%;
? ??: ??;
? ??: 100%;
? ??: 75px;
? ??: ??(50% - 37.5px);
? -webkit-animation: ??? ?? 7? 0.2? ?? ??;
? ? ? ? ? ?????: ??? ?? 7? 0.2? ?? ??;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
}

.cat-lower {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 100%;
? ??: 100%;
? -webkit-animation: 7? 0.5? ?? ?? ??;
? ? ? ? ? ?????: ?? 7? 0.5? ?? ??;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
}
.cat-lower:?? {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 100%;
? ??: 100%;
? ??? ??: 100px;
? ?? ???: -webkit-radial-gradient(10px 50px, ?, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? ?? ???: ??? ?????(10px 50px? ?, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? Z-??: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
? Z-??: -1;
? ??: ??;
? ??: 20px;
? ??: 20px;
? -webkit-animation: Swing-leg 7s 0.3s ?? ??;
? ? ? ? ? ?????: ?? ?? 7? 0.3? ?? ??;
? Z-??: 1;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
? ??? ?? ?? ??: 20px;
? ??? ?? ??? ??: 20px;
? ?? ???: -webkit-linear-gradient(??, ??, #D5E8F8, #8B9BD9);
? ?? ???: ?? ?????(???, ??, #D5E8F8, #8B9BD9);
}
.cat-lower > .??? ?? {
? ??: 20px;
}
.cat-lower > .cat-leg .cat-leg {
? ??: 25%;
}
.cat-lower > .cat-leg + .cat-leg {
? ???: 0;
}
.cat-lower .cat-paw {
? ??: 50%;
? ??? ??: 50%;
? ???: #fff;
}
.cat-lower .cat-tail {
? ??: ??;
? ??: 15px;
? ??: 10px;
? -webkit-animation: Swing-tail 7s ?? ???(0.5, 0, 0.5, 1) ? ? ??;
? ? ? ? ? ?????: ?? ?? 7s ?? ???(0.5, 0, 0.5, 1) ? ? ??;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
? Z-??: 0;
? ?? ???: -webkit-linear-gradient(??, ??, #D5E8F8, #8B9BD9);
? ?? ???: ?? ?????(???, ??, #D5E8F8, #8B9BD9);
? ??? ?? ?? ??: 10px;
? ??? ?? ??? ??: 10px;
}
.cat-lower .cat-tail > .cat-tail {
? ??: 50%;
}
.cat-lower > .cat-tail {
? ??: ??(50% - 5px);
? ??: 95%;
}

.??? ?? {
? ??: 90px;
? ??: 90px;
? ?? ???: -webkit-radial-gradient(10px 10px, ?, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? ?? ???: ??? ?????(10px 10px? ?, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? ??? ??: 50%;
? ??: ??(100% - 45px);
}

.??? ?? {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 100%;
? ??: 100%;
? -webkit-animation: ? 7s ?? ???(0.5, 0, 0.5, 1) ?? ??;
? ? ? ? ? ?????: ? 7s ?? ???(0.5, 0, 0.5, 1) ? ? ??;
? -webkit-transform-style: ??-3d;
? ? ? ? ? ?? ???: ??-3D;
? -?? ??: 100px;
? ? ? ? ? ???: 100px;
}

.???? {
? ??: ??;
? ??: 0;
? ??: 0;
? ??: 50%;
? ??: 100%;
? Z-??: -1;
}

.???? {
? ??: 20px;
? ??: 100%;
? ??: ??;
? ??? ??: 5px;
? ??: -10px;
}
.cat-ear:? ?? ?? {
? ??: 0;
? -webkit-transform-origin: ?? ?;
? ? ? ? ? ?? ??: ?? ??;
? -webkit-transform: SkewY(40deg);
? ? ? ? ? ??: SkewY(40deg);
? ???: ??;
}
.cat-ear:? ?? ??:?? {
? ??: 0;
? ??? ??? ? ??: 50%;
? ??? ??? ?? ??: 50%;
? ???: #D7EBFB;
}
.cat-ear:??? ?? {
? ???: 0;
? -webkit-transform-origin: ??? ??;
? ? ? ? ? ?? ??: ??? ??;
? -webkit-transform: SkewY(-40deg);
? ? ? ? ? ??: ????Y(-40deg);
? ???: #d1e6f7;
}
.cat-ear:??? ??:?? {
? ???: 0;
? ???-?? ??-??: 50%;
? ??? ?? ?? ??: 50%;
? ???: #e0f0fc;
}
.cat-ear:?? {
? ??: 60%;
? ??: 100%;
? ??: 10px;
? ??: ??;
? ???: #fff;
}

.??? ? {
? ??: ??;
? ??: 50%;
? ??: 100%;
? ??: 6px;
? -webkit-animation: 7? ?? ??? ?? ? ?? ??;
? ? ? ? ? ?????: 7? ??? ?? ? ?? ? ?;
}
.cat-eyes:??, .cat-eyes:?? {
? ??: ??;
? ??: 6px;
? ??: 6px;
? ??? ??: 50%;
? ???: #4B4D75;
}
.cat-eyes:?? {
? ??: 20px;
}
.cat-eyes:?? {
? ???: 20px;
}

.??? ? {
? ??: ??;
? ??: 12px;
? ??: 8px;
? ???: #4B4D75;
? ??: 60%;
? ??: ??(50% - 6px);
? ???-?? ??-??: 50% 30%;
? ??? ??? ? ??: 50% 30%;
? ???-??-??-??: 50% 70%;
? ???-??? ??-??: 50% 70%;
? -webkit-transform: ??Z(10px);
? ? ? ? ? ??: ??Z(10px);
}
.cat-mouth:??, .cat-mouth:?? {
? ??: ??;
? ??: 90%;
? ??: 100%;
? ???: 2px ?? #9FA2CB;
? ??: 80%;
? ??? ??: 100px;
? ??? ?? ??: ??;
? Z-??: -1;
}
.cat-mouth:?? {
? ??? ?? ??: ??;
? ???: calc(50% - 1px);
? -webkit-transform-origin: ??? ??;
? ? ? ? ? ??-??: ??? ??;
? -?? ??: ??(10?);
? ? ? ? ? ??: ??(10?);
}
.cat-mouth:?? {
? ??? ??? ??: ??;
? ??: ??(50% - 1px);
? -webkit-transform-origin: ?? ?;
? ? ? ? ? ?? ??: ?? ??;
? -webkit-transform: ??(-10?);
? ? ? ? ? ??: ??(-10deg);
}

.cat-whiskers {
? ??: 50%;
? ??: 8px;
? ??: ??;
? ??: 25%;
? ??: 25%;
? -webkit-transform-style: ??-3d;
? ? ? ? ? ?? ???: ??-3D;
? -?? ??: 60px;
? ? ? ? ? ???: 60px;
}
.cat-whiskers:??, .cat-whiskers:?? {
? ??: ??;
? ??: 100%;
? ??: 30%;
? ???: 2px ?? #9FA2CB;
? ??? ??: ??;
? ?? ???: ??;
}
.cat-whiskers:?? {
? ???: 100%;
? -webkit-transform-origin: ??? ??;
? ? ? ? ? ??-??: ??? ??;
? -webkit-transform: ??Y(70deg) ??Z(-10deg);
? ? ? ? ? ??: ??Y(70?) ??Z(-10?);
}
.cat-whiskers:?? {
? ??: 100%;
? -webkit-transform-origin: ?? ??;
? ? ? ? ? ??-??: ?? ??;
? -webkit-transform: ??Y(-70deg) ??Z(10deg);
? ? ? ? ? ??: ??Y(-70deg) ??Z(10deg);
}

@-webkit-keyframes ? {
? 0% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 6.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 12.5% ??{
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 18.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 25% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 31.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 37.5% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 43.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 50% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 56.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 62.5% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 68.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 75% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 81.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 87.5% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 93.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 100% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
}

@keyframes ? {
? 0% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 6.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 12.5% ??{
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 18.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 25% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 31.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 37.5% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 43.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 50% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 56.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 62.5% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 68.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 75% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 81.25% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 87.5% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
? 93.75% {
? ? -webkit-transform: ??Y(-0.4rem);
? ? ? ? ? ? ??: ??Y(-0.4rem);
? }
? 100% {
? ? -webkit-transform: ??Y(0.4rem);
? ? ? ? ? ? ??: ??Y(0.4rem);
? }
}
@-webkit-keyframes ?? {
? 0% {
? ? -?? ??: ??(5?);
? ? ? ? ? ? ??: ??(5?);
? }
? 12.5% ??{
? ? -webkit-transform: ??(-10?);
? ? ? ? ? ? ??: ??(-10deg);
? }
? 25% {
? ? -?? ??: ??(10?);
? ? ? ? ? ? ??: ??(10?);
? }
? 37.5% {
? ? -webkit-transform: ??(-15?);
? ? ? ? ? ? ??: ??(-15?);
? }
? 50% {
? ? -?? ??: ??(23?);
? ? ? ? ? ? ??: ??(23?);
? }
? 62.5% {
? ? -webkit-transform: ??(-23?);
? ? ? ? ? ? ??: ??(-23?);
? }
? 75% {
? ? -webkit-transform: ??(15?);
? ? ? ? ? ? ??: ??(15?);
? }
? 87.5% {
? ? -webkit-transform: ??(-10?);
? ? ? ? ? ? ??: ??(-10deg);
? }
? 100% {
? ? -?? ??: ??(5?);
? ? ? ? ? ? ??: ??(5?);
? }
}
@keyframes ?? {
? 0% {
? ? -?? ??: ??(5?);
? ? ? ? ? ? ??: ??(5?);
? }
? 12.5% ??{
? ? -webkit-transform: ??(-10?);
? ? ? ? ? ? ??: ??(-10deg);
? }
? 25% {
? ? -?? ??: ??(10?);
? ? ? ? ? ? ??: ??(10?);
? }
? 37.5% {
? ? -webkit-transform: ??(-15?);
? ? ? ? ? ? ??: ??(-15?);
? }
? 50% {
? ? -?? ??: ??(23?);
? ? ? ? ? ? ??: ??(23?);
? }
? 62.5% {
? ? -webkit-transform: ??(-23?);
? ? ? ? ? ? ??: ??(-23?);
? }
? 75% {
? ? -webkit-transform: ??(15?);
? ? ? ? ? ? ??: ??(15?);
? }
? 87.5% {
? ? -webkit-transform: ??(-10?);
? ? ? ? ? ? ??: ??(-10deg);
? }
? 100% {
? ? -?? ??: ??(5?);
? ? ? ? ? ? ??: ??(5?);
? }
}
@-webkit-keyframes ?? ?? {
? 0% {
? ? -webkit-transform: ??(0.5deg);
? ? ? ? ? ? ??: ??(0.5deg);
? }
? 12.5% ??{
? ? -webkit-transform: ??(-1deg);
? ? ? ? ? ? ??: ??(-1deg);
? }
? 25% {
? ? -webkit-transform: ??(1?);
? ? ? ? ? ? ??: ??(1?);
? }
? 37.5% {
? ? -webkit-transform: ??(-1.5deg);
? ? ? ? ? ? ??: ??(-1.5deg);
? }
? 50% {
? ? -?? ??: ??(2.3?);
? ? ? ? ? ? ??: ??(2.3?);
? }
? 62.5% {
? ? -webkit-transform: ??(-2.3deg);
? ? ? ? ? ? ??: ??(-2.3deg);
? }
? 75% {
? ? -webkit-transform: ??(1.5?);
? ? ? ? ? ? ??: ??(1.5deg);
? }
? 87.5% {
? ? -webkit-transform: ??(-1deg);
? ? ? ? ? ? ??: ??(-1deg);
? }
? 100% {
? ? -webkit-transform: ??(0.5deg);
? ? ? ? ? ? ??: ??(0.5deg);
? }
}
@keyframes ?? ?? {
? 0% {
? ? -webkit-transform: ??(0.5deg);
? ? ? ? ? ? ??: ??(0.5deg);
? }
? 12.5% ??{
? ? -webkit-transform: ??(-1deg);
? ? ? ? ? ? ??: ??(-1deg);
? }
? 25% {
? ? -webkit-transform: ??(1?);
? ? ? ? ? ? ??: ??(1?);
? }
? 37.5% {
? ? -webkit-transform: ??(-1.5deg);
? ? ? ? ? ? ??: ??(-1.5deg);
? }
? 50% {
? ? -?? ??: ??(2.3?);
? ? ? ? ? ? ??: ??(2.3?);
? }
? 62.5% {
? ? -webkit-transform: ??(-2.3deg);
? ? ? ? ? ? ??: ??(-2.3deg);
? }
? 75% {
? ? -webkit-transform: ??(1.5?);
? ? ? ? ? ? ??: ??(1.5deg);
? }
? 87.5% {
? ? -webkit-transform: ??(-1deg);
? ? ? ? ? ? ??: ??(-1deg);
? }
? 100% {
? ? -webkit-transform: ??(0.5deg);
? ? ? ? ? ? ??: ??(0.5deg);
? }
}
@-webkit-keyframes ?? ?? {
? 0% {
? ? -webkit-transform: ??(-2deg);
? ? ? ? ? ? ??: ??(-2deg);
? }
? 12.5% ??{
? ? -?? ??: ??(4?);
? ? ? ? ? ? ??: ??(4?);
? }
? 25% {
? ? -webkit-transform: ??(-4deg);
? ? ? ? ? ? ??: ??(-4deg);
? }
? 37.5% {
? ? -?? ??: ??(6?);
? ? ? ? ? ? ??: ??(6?);
? }
? 50% {
? ? -webkit-transform: ??(-9.2deg);
? ? ? ? ? ? ??: ??(-9.2deg);
? }
? 62.5% {
? ? -webkit-transform: ??(9.2deg);
? ? ? ? ? ? ??: ??(9.2deg);
? }
? 75% {
? ? -webkit-transform: ??(-6?);
? ? ? ? ? ? ??: ??(-6?);
? }
? 87.5% {
? ? -?? ??: ??(4?);
? ? ? ? ? ? ??: ??(4?);
? }
? 100% {
? ? -webkit-transform: ??(-2deg);
? ? ? ? ? ? ??: ??(-2deg);
? }
}
@keyframes ???? {
? 0% {
? ? -webkit-transform: ??(-2deg);
? ? ? ? ? ? ??: ??(-2deg);
? }
? 12.5% ??{
? ? -?? ??: ??(4?);
? ? ? ? ? ? ??: ??(4?);
? }
? 25% {
? ? -webkit-transform: ??(-4deg);
? ? ? ? ? ? ??: ??(-4deg);
? }
? 37.5% {
? ? -?? ??: ??(6?);
? ? ? ? ? ? ??: ??(6?);
? }
? 50% {
? ? -webkit-transform: ??(-9.2deg);
? ? ? ? ? ? ??: ??(-9.2deg);
? }
? 62.5% {
? ? -webkit-transform: ??(9.2deg);
? ? ? ? ? ? ??: ??(9.2deg);
? }
? 75% {
? ? -webkit-transform: ??(-6?);
? ? ? ? ? ? ??: ??(-6deg);
? }
? 87.5% {
? ? -?? ??: ??(4?);
? ? ? ? ? ? ??: ??(4?);
? }
? 100% {
? ? -webkit-transform: ??(-2deg);
? ? ? ? ? ? ??: ??(-2deg);
? }
}
@-webkit-keyframes ??? {
? 0% {
? ? -webkit-transform: ??(-5?);
? ? ? ? ? ? ??: ??(-5?);
? }
? 12.5% ??{
? ? -?? ??: ??(10?);
? ? ? ? ? ? ??: ??(10?);
? }
? 25% {
? ? -webkit-transform: ??(-10?);
? ? ? ? ? ? ??: ??(-10deg);
? }
? 37.5% {
? ? -webkit-transform: ??(15?);
? ? ? ? ? ? ??: ??(15?);
? }
? 50% {
? ? -webkit-transform: ??(-23?);
? ? ? ? ? ? ??: ??(-23?);
? }
? 62.5% {
? ? -?? ??: ??(23?);
? ? ? ? ? ? ??: ??(23?);
? }
? 75% {
? ? -webkit-transform: ??(-15?);
? ? ? ? ? ? ??: ??(-15?);
? }
? 87.5% {
? ? -?? ??: ??(10?);
? ? ? ? ? ? ??: ??(10?);
? }
? 100% {
? ? -webkit-transform: ??(-5?);
? ? ? ? ? ? ??: ??(-5?);
? }
}
@keyframes ??? ?? {
? 0% {
? ? -webkit-transform: ??(-5?);
? ? ? ? ? ? ??: ??(-5?);
? }
? 12.5% ??{
? ? -?? ??: ??(10?);
? ? ? ? ? ? ??: ??(10?);
? }
? 25% {
? ? -webkit-transform: ??(-10?);
? ? ? ? ? ? ??: ??(-10deg);
? }
? 37.5% {
? ? -webkit-transform: ??(15?);
? ? ? ? ? ? ??: ??(15?);
? }
? 50% {
? ? -webkit-transform: ??(-23?);
? ? ? ? ? ? ??: ??(-23?);
? }
? 62.5% {
? ? -?? ??: ??(23?);
? ? ? ? ? ? ??: ??(23?);
? }
? 75% {
? ? -webkit-transform: ??(-15?);
? ? ? ? ? ? ??: ??(-15?);
? }
? 87.5% {
? ? -?? ??: ??(10?);
? ? ? ? ? ? ??: ??(10?);
? }
? 100% {
? ? -webkit-transform: ??(-5?);
? ? ? ? ? ? ??: ??(-5?);
? }
}
@-webkit-keyframes ?? {
? 0% {
? ? -webkit-transform: ??X(-2.5px);
? ? ? ? ? ? ??: ??X(-2.5px);
? }
? 12.5% ??{
? ? -webkit-transform: ??X(5px);
? ? ? ? ? ? ??: ??X(5px);
? }
? 25% {
? ? -webkit-transform: ??X(-5px);
? ? ? ? ? ? ??: ??X(-5px);
? }
? 37.5% {
? ? -webkit-transform: ??X(7.5px);
? ? ? ? ? ? ??: ??X(7.5px);
? }
? 50% {
? ? -webkit-transform: ??X(-11.5px);
? ? ? ? ? ? ??: ??X(-11.5px);
? }
? 62.5% {
? ? -webkit-transform: ??X(11.5px);
? ? ? ? ? ? ??: ??X(11.5px);
? }
? 75% {
? ? -webkit-transform: ??X(-7.5px);
? ? ? ? ? ? ??: ??X(-7.5px);
? }
? 87.5% {
? ? -webkit-transform: ??X(5px);
? ? ? ? ? ? ??: ??X(5px);
? }
? 100% {
? ? -webkit-transform: ??X(-2.5px);
? ? ? ? ? ? ??: ??X(-2.5px);
? }
}
@keyframes ?? {
? 0% {
? ? -webkit-transform: ??X(-2.5px);
? ? ? ? ? ? ??: ??X(-2.5px);
? }
? 12.5% ??{
? ? -webkit-transform: ??X(5px);
? ? ? ? ? ? ??: ??X(5px);
? }
? 25% {
? ? -webkit-transform: ??X(-5px);
? ? ? ? ? ? ??: ??X(-5px);
? }
? 37.5% {
? ? -webkit-transform: ??X(7.5px);
? ? ? ? ? ? ??: ??X(7.5px);
? }
? 50% {
? ? -webkit-transform: ??X(-11.5px);
? ? ? ? ? ? ??: ??X(-11.5px);
? }
? 62.5% {
? ? -webkit-transform: ??X(11.5px);
? ? ? ? ? ? ??: ??X(11.5px);
? }
? 75% {
? ? -webkit-transform: ??X(-7.5px);
? ? ? ? ? ? ??: ??X(-7.5px);
? }
? 87.5% {
? ? -webkit-transform: ??X(5px);
? ? ? ? ? ? ??: ??X(5px);
? }
? 100% {
? ? -webkit-transform: ??X(-2.5px);
? ? ? ? ? ? ??: ??X(-2.5px);
? }
}
@-webkit-keyframes ??? ? {
? {
?? ? ? ????: 0;
? }
? {
? ? ? ????: 1;
? }
}
@keyframes ??? ? {
? {
?? ? ? ????: 0;
? }
? {
? ? ? ????: 1;
? }
}
@-webkit-keyframes ??? {
? ??, ??, 10%, 25%, 80% {
? ? -webkit-transform: scaleY(1);
? ? ? ? ? ? ??: scaleY(1);
? }
? 8%, 23%, 78% {
? ? -webkit-transform: scaleY(0.1);
? ? ? ? ? ? ??: scaleY(0.1);
? }
}
@keyframes ??? {
? ??, ??, 10%, 25%, 80% {
? ? -webkit-transform: scaleY(1);
? ? ? ? ? ? ??: scaleY(1);
? }
? 8%, 23%, 78% {
? ? -webkit-transform: scaleY(0.1);
? ? ? ? ? ? ??: scaleY(0.1);
? }
}
??, HTML {
? ??: 100%;
? ??: 100%;
? ??: 0;
? ??: 0;
? ???: #1F1F3C;
? ????: ??;
}

*, *:??, *:?? {
? ?? ?? ??: ??? ??;
? ??: ???;
? -webkit-animation-timing-function: ?? ???(0.5, 0, 0.5, 1);
? ? ? ? ? ????? ??? ??: ?? ???(0.5, 0, 0.5, 1);
? -webkit-animation-fill-mode: ? ?;
? ? ? ? ? ????? ??? ??: ? ?;
}

*:??, *:?? {
? ??: '';
? ?????: ??;
}