-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.13s);
animation-delay: calc((var(–speed) * 0.68) + 0.13s);
}
@-webkit-keyframes particle-animation-14 {
100% {
-webkit-transform: translateX(calc(0.42535094 * var(–horse-width) )) translateY(calc(-0.0075721832 * (var(–horse-height) / 5))) scale(4) rotate(-132.5deg);
transform: translateX(calc(0.42535094 * var(–horse-width) )) translateY(calc(-0.0075721832 * (var(–horse-height) / 5))) scale(4) rotate(-132.5deg);
opacity: 0;
}
}
@keyframes particle-animation-14 {
100% {
-webkit-transform: translateX(calc(0.42535094 * var(–horse-width) )) translateY(calc(-0.0075721832 * (var(–horse-height) / 5))) scale(4) rotate(-132.5deg);
transform: translateX(calc(0.42535094 * var(–horse-width) )) translateY(calc(-0.0075721832 * (var(–horse-height) / 5))) scale(4) rotate(-132.5deg);
opacity: 0;
}
}
.particle:nth-child(14) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-14 var(–speed) ease-out infinite;
animation: particle-animation-14 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.14s);
animation-delay: calc((var(–speed) * 0.1) + 0.14s);
}
.dust.back .particle:nth-child(14) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.14s);
animation-delay: calc((var(–speed) * 0.68) + 0.14s);
}
@-webkit-keyframes particle-animation-15 {
100% {
-webkit-transform: translateX(calc(0.7452356352 * var(–horse-width) )) translateY(calc(-0.0073289409 * (var(–horse-height) / 5))) scale(6) rotate(-123.5deg);
transform: translateX(calc(0.7452356352 * var(–horse-width) )) translateY(calc(-0.0073289409 * (var(–horse-height) / 5))) scale(6) rotate(-123.5deg);
opacity: 0;
}
}
@keyframes particle-animation-15 {
100% {
-webkit-transform: translateX(calc(0.7452356352 * var(–horse-width) )) translateY(calc(-0.0073289409 * (var(–horse-height) / 5))) scale(6) rotate(-123.5deg);
transform: translateX(calc(0.7452356352 * var(–horse-width) )) translateY(calc(-0.0073289409 * (var(–horse-height) / 5))) scale(6) rotate(-123.5deg);
opacity: 0;
}
}
.particle:nth-child(15) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-15 var(–speed) ease-out infinite;
animation: particle-animation-15 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.15s);
animation-delay: calc((var(–speed) * 0.1) + 0.15s);
}
.dust.back .particle:nth-child(15) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.15s);
animation-delay: calc((var(–speed) * 0.68) + 0.15s);
}
@-webkit-keyframes particle-animation-16 {
100% {
-webkit-transform: translateX(calc(0.1938593161 * var(–horse-width) )) translateY(calc(-0.001627937 * (var(–horse-height) / 5))) scale(4) rotate(-58.5deg);
transform: translateX(calc(0.1938593161 * var(–horse-width) )) translateY(calc(-0.001627937 * (var(–horse-height) / 5))) scale(4) rotate(-58.5deg);
opacity: 0;
}
}
@keyframes particle-animation-16 {
100% {
-webkit-transform: translateX(calc(0.1938593161 * var(–horse-width) )) translateY(calc(-0.001627937 * (var(–horse-height) / 5))) scale(4) rotate(-58.5deg);
transform: translateX(calc(0.1938593161 * var(–horse-width) )) translateY(calc(-0.001627937 * (var(–horse-height) / 5))) scale(4) rotate(-58.5deg);
opacity: 0;
}
}
.particle:nth-child(16) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-16 var(–speed) ease-out infinite;
animation: particle-animation-16 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.16s);
animation-delay: calc((var(–speed) * 0.1) + 0.16s);
}
.dust.back .particle:nth-child(16) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.16s);
animation-delay: calc((var(–speed) * 0.68) + 0.16s);
}
@-webkit-keyframes particle-animation-17 {
100% {
-webkit-transform: translateX(calc(0.6343787799 * var(–horse-width) )) translateY(calc(-0.0066278581 * (var(–horse-height) / 5))) scale(3) rotate(-21.5deg);
transform: translateX(calc(0.6343787799 * var(–horse-width) )) translateY(calc(-0.0066278581 * (var(–horse-height) / 5))) scale(3) rotate(-21.5deg);
opacity: 0;
}
}
@keyframes particle-animation-17 {
100% {
-webkit-transform: translateX(calc(0.6343787799 * var(–horse-width) )) translateY(calc(-0.0066278581 * (var(–horse-height) / 5))) scale(3) rotate(-21.5deg);
transform: translateX(calc(0.6343787799 * var(–horse-width) )) translateY(calc(-0.0066278581 * (var(–horse-height) / 5))) scale(3) rotate(-21.5deg);
opacity: 0;
}
}
.particle:nth-child(17) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-17 var(–speed) ease-out infinite;
animation: particle-animation-17 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.17s);
animation-delay: calc((var(–speed) * 0.1) + 0.17s);
}
.dust.back .particle:nth-child(17) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.17s);
animation-delay: calc((var(–speed) * 0.68) + 0.17s);
}
@-webkit-keyframes particle-animation-18 {
100% {
-webkit-transform: translateX(calc(0.4876350864 * var(–horse-width) )) translateY(calc(-0.0016273622 * (var(–horse-height) / 5))) scale(4) rotate(-126deg);
transform: translateX(calc(0.4876350864 * var(–horse-width) )) translateY(calc(-0.0016273622 * (var(–horse-height) / 5))) scale(4) rotate(-126deg);
opacity: 0;
}
}
@keyframes particle-animation-18 {
100% {
-webkit-transform: translateX(calc(0.4876350864 * var(–horse-width) )) translateY(calc(-0.0016273622 * (var(–horse-height) / 5))) scale(4) rotate(-126deg);
transform: translateX(calc(0.4876350864 * var(–horse-width) )) translateY(calc(-0.0016273622 * (var(–horse-height) / 5))) scale(4) rotate(-126deg);
opacity: 0;
}
}
.particle:nth-child(18) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-18 var(–speed) ease-out infinite;
animation: particle-animation-18 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.18s);
animation-delay: calc((var(–speed) * 0.1) + 0.18s);
}
.dust.back .particle:nth-child(18) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.18s);
animation-delay: calc((var(–speed) * 0.68) + 0.18s);
}
@-webkit-keyframes particle-animation-19 {
100% {
-webkit-transform: translateX(calc(0.4212577815 * var(–horse-width) )) translateY(calc(-0.0037658084 * (var(–horse-height) / 5))) scale(3) rotate(-13.5deg);
transform: translateX(calc(0.4212577815 * var(–horse-width) )) translateY(calc(-0.0037658084 * (var(–horse-height) / 5))) scale(3) rotate(-13.5deg);
opacity: 0;
}
}
@keyframes particle-animation-19 {
100% {
-webkit-transform: translateX(calc(0.4212577815 * var(–horse-width) )) translateY(calc(-0.0037658084 * (var(–horse-height) / 5))) scale(3) rotate(-13.5deg);
transform: translateX(calc(0.4212577815 * var(–horse-width) )) translateY(calc(-0.0037658084 * (var(–horse-height) / 5))) scale(3) rotate(-13.5deg);
opacity: 0;
}
}
.particle:nth-child(19) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-19 var(–speed) ease-out infinite;
animation: particle-animation-19 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.19s);
animation-delay: calc((var(–speed) * 0.1) + 0.19s);
}
.dust.back .particle:nth-child(19) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.19s);
animation-delay: calc((var(–speed) * 0.68) + 0.19s);
}
@-webkit-keyframes particle-animation-20 {
100% {
-webkit-transform: translateX(calc(0.2136224885 * var(–horse-width) )) translateY(calc(-0.0097781826 * (var(–horse-height) / 5))) scale(6) rotate(-90deg);
transform: translateX(calc(0.2136224885 * var(–horse-width) )) translateY(calc(-0.0097781826 * (var(–horse-height) / 5))) scale(6) rotate(-90deg);
opacity: 0;
}
}
@keyframes particle-animation-20 {
100% {
-webkit-transform: translateX(calc(0.2136224885 * var(–horse-width) )) translateY(calc(-0.0097781826 * (var(–horse-height) / 5))) scale(6) rotate(-90deg);
transform: translateX(calc(0.2136224885 * var(–horse-width) )) translateY(calc(-0.0097781826 * (var(–horse-height) / 5))) scale(6) rotate(-90deg);
opacity: 0;
}
}
.particle:nth-child(20) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-20 var(–speed) ease-out infinite;
animation: particle-animation-20 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.2s);
animation-delay: calc((var(–speed) * 0.1) + 0.2s);
}
.dust.back .particle:nth-child(20) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.2s);
animation-delay: calc((var(–speed) * 0.68) + 0.2s);
}
@-webkit-keyframes particle-animation-21 {
100% {
-webkit-transform: translateX(calc(0.1551286867 * var(–horse-width) )) translateY(calc(-0.0011942323 * (var(–horse-height) / 5))) scale(5) rotate(-103deg);
transform: translateX(calc(0.1551286867 * var(–horse-width) )) translateY(calc(-0.0011942323 * (var(–horse-height) / 5))) scale(5) rotate(-103deg);
opacity: 0;
}
}
@keyframes particle-animation-21 {
100% {
-webkit-transform: translateX(calc(0.1551286867 * var(–horse-width) )) translateY(calc(-0.0011942323 * (var(–horse-height) / 5))) scale(5) rotate(-103deg);
transform: translateX(calc(0.1551286867 * var(–horse-width) )) translateY(calc(-0.0011942323 * (var(–horse-height) / 5))) scale(5) rotate(-103deg);
opacity: 0;
}
}
.particle:nth-child(21) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-21 var(–speed) ease-out infinite;
animation: particle-animation-21 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.21s);
animation-delay: calc((var(–speed) * 0.1) + 0.21s);
}
.dust.back .particle:nth-child(21) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.21s);
animation-delay: calc((var(–speed) * 0.68) + 0.21s);
}
@-webkit-keyframes particle-animation-22 {
100% {
-webkit-transform: translateX(calc(0.1209336063 * var(–horse-width) )) translateY(calc(-0.0066128277 * (var(–horse-height) / 5))) scale(4) rotate(-67.5deg);
transform: translateX(calc(0.1209336063 * var(–horse-width) )) translateY(calc(-0.0066128277 * (var(–horse-height) / 5))) scale(4) rotate(-67.5deg);
opacity: 0;
}
}
@keyframes particle-animation-22 {
100% {
-webkit-transform: translateX(calc(0.1209336063 * var(–horse-width) )) translateY(calc(-0.0066128277 * (var(–horse-height) / 5))) scale(4) rotate(-67.5deg);
transform: translateX(calc(0.1209336063 * var(–horse-width) )) translateY(calc(-0.0066128277 * (var(–horse-height) / 5))) scale(4) rotate(-67.5deg);
opacity: 0;
}
}
.particle:nth-child(22) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-22 var(–speed) ease-out infinite;
animation: particle-animation-22 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.22s);
animation-delay: calc((var(–speed) * 0.1) + 0.22s);
}
.dust.back .particle:nth-child(22) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.22s);
animation-delay: calc((var(–speed) * 0.68) + 0.22s);
}
@-webkit-keyframes particle-animation-23 {
100% {
-webkit-transform: translateX(calc(0.0602769488 * var(–horse-width) )) translateY(calc(-0.0011684712 * (var(–horse-height) / 5))) scale(3) rotate(-31deg);
transform: translateX(calc(0.0602769488 * var(–horse-width) )) translateY(calc(-0.0011684712 * (var(–horse-height) / 5))) scale(3) rotate(-31deg);
opacity: 0;
}
}
@keyframes particle-animation-23 {
100% {
-webkit-transform: translateX(calc(0.0602769488 * var(–horse-width) )) translateY(calc(-0.0011684712 * (var(–horse-height) / 5))) scale(3) rotate(-31deg);
transform: translateX(calc(0.0602769488 * var(–horse-width) )) translateY(calc(-0.0011684712 * (var(–horse-height) / 5))) scale(3) rotate(-31deg);
opacity: 0;
}
}
.particle:nth-child(23) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-23 var(–speed) ease-out infinite;
animation: particle-animation-23 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.23s);
animation-delay: calc((var(–speed) * 0.1) + 0.23s);
}
.dust.back .particle:nth-child(23) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.23s);
animation-delay: calc((var(–speed) * 0.68) + 0.23s);
}
@-webkit-keyframes particle-animation-24 {
100% {
-webkit-transform: translateX(calc(0.3198047248 * var(–horse-width) )) translateY(calc(-0.0015904695 * (var(–horse-height) / 5))) scale(6) rotate(-99.5deg);
transform: translateX(calc(0.3198047248 * var(–horse-width) )) translateY(calc(-0.0015904695 * (var(–horse-height) / 5))) scale(6) rotate(-99.5deg);
opacity: 0;
}
}
@keyframes particle-animation-24 {
100% {
-webkit-transform: translateX(calc(0.3198047248 * var(–horse-width) )) translateY(calc(-0.0015904695 * (var(–horse-height) / 5))) scale(6) rotate(-99.5deg);
transform: translateX(calc(0.3198047248 * var(–horse-width) )) translateY(calc(-0.0015904695 * (var(–horse-height) / 5))) scale(6) rotate(-99.5deg);
opacity: 0;
}
}
.particle:nth-child(24) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-24 var(–speed) ease-out infinite;
animation: particle-animation-24 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.24s);
animation-delay: calc((var(–speed) * 0.1) + 0.24s);
}
.dust.back .particle:nth-child(24) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.24s);
animation-delay: calc((var(–speed) * 0.68) + 0.24s);
}
@-webkit-keyframes particle-animation-25 {
100% {
-webkit-transform: translateX(calc(0.1588674695 * var(–horse-width) )) translateY(calc(-0.0045113484 * (var(–horse-height) / 5))) scale(5) rotate(-147.5deg);
transform: translateX(calc(0.1588674695 * var(–horse-width) )) translateY(calc(-0.0045113484 * (var(–horse-height) / 5))) scale(5) rotate(-147.5deg);
opacity: 0;
}
}
@keyframes particle-animation-25 {
100% {
-webkit-transform: translateX(calc(0.1588674695 * var(–horse-width) )) translateY(calc(-0.0045113484 * (var(–horse-height) / 5))) scale(5) rotate(-147.5deg);
transform: translateX(calc(0.1588674695 * var(–horse-width) )) translateY(calc(-0.0045113484 * (var(–horse-height) / 5))) scale(5) rotate(-147.5deg);
opacity: 0;
}
}
.particle:nth-child(25) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-25 var(–speed) ease-out infinite;
animation: particle-animation-25 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.25s);
animation-delay: calc((var(–speed) * 0.1) + 0.25s);
}
.dust.back .particle:nth-child(25) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.25s);
animation-delay: calc((var(–speed) * 0.68) + 0.25s);
}
@-webkit-keyframes particle-animation-26 {
100% {
-webkit-transform: translateX(calc(0.332034558 * var(–horse-width) )) translateY(calc(-0.0055916241 * (var(–horse-height) / 5))) scale(5) rotate(-94deg);
transform: translateX(calc(0.332034558 * var(–horse-width) )) translateY(calc(-0.0055916241 * (var(–horse-height) / 5))) scale(5) rotate(-94deg);
opacity: 0;
}
}
@keyframes particle-animation-26 {
100% {
-webkit-transform: translateX(calc(0.332034558 * var(–horse-width) )) translateY(calc(-0.0055916241 * (var(–horse-height) / 5))) scale(5) rotate(-94deg);
transform: translateX(calc(0.332034558 * var(–horse-width) )) translateY(calc(-0.0055916241 * (var(–horse-height) / 5))) scale(5) rotate(-94deg);
opacity: 0;
}
}
.particle:nth-child(26) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-26 var(–speed) ease-out infinite;
animation: particle-animation-26 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.26s);
animation-delay: calc((var(–speed) * 0.1) + 0.26s);
}
.dust.back .particle:nth-child(26) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.26s);
animation-delay: calc((var(–speed) * 0.68) + 0.26s);
}
@-webkit-keyframes particle-animation-27 {
100% {
-webkit-transform: translateX(calc(0.0768374373 * var(–horse-width) )) translateY(calc(-0.0001619302 * (var(–horse-height) / 5))) scale(5) rotate(-31.5deg);
transform: translateX(calc(0.0768374373 * var(–horse-width) )) translateY(calc(-0.0001619302 * (var(–horse-height) / 5))) scale(5) rotate(-31.5deg);
opacity: 0;
}
}
@keyframes particle-animation-27 {
100% {
-webkit-transform: translateX(calc(0.0768374373 * var(–horse-width) )) translateY(calc(-0.0001619302 * (var(–horse-height) / 5))) scale(5) rotate(-31.5deg);
transform: translateX(calc(0.0768374373 * var(–horse-width) )) translateY(calc(-0.0001619302 * (var(–horse-height) / 5))) scale(5) rotate(-31.5deg);
opacity: 0;
}
}
.particle:nth-child(27) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-27 var(–speed) ease-out infinite;
animation: particle-animation-27 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.27s);
animation-delay: calc((var(–speed) * 0.1) + 0.27s);
}
.dust.back .particle:nth-child(27) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.27s);
animation-delay: calc((var(–speed) * 0.68) + 0.27s);
}
@-webkit-keyframes particle-animation-28 {
100% {
-webkit-transform: translateX(calc(0.4651432668 * var(–horse-width) )) translateY(calc(-0.008099548 * (var(–horse-height) / 5))) scale(4) rotate(-130deg);
transform: translateX(calc(0.4651432668 * var(–horse-width) )) translateY(calc(-0.008099548 * (var(–horse-height) / 5))) scale(4) rotate(-130deg);
opacity: 0;
}
}
@keyframes particle-animation-28 {
100% {
-webkit-transform: translateX(calc(0.4651432668 * var(–horse-width) )) translateY(calc(-0.008099548 * (var(–horse-height) / 5))) scale(4) rotate(-130deg);
transform: translateX(calc(0.4651432668 * var(–horse-width) )) translateY(calc(-0.008099548 * (var(–horse-height) / 5))) scale(4) rotate(-130deg);
opacity: 0;
}
}
.particle:nth-child(28) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-28 var(–speed) ease-out infinite;
animation: particle-animation-28 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.28s);
animation-delay: calc((var(–speed) * 0.1) + 0.28s);
}
.dust.back .particle:nth-child(28) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.28s);
animation-delay: calc((var(–speed) * 0.68) + 0.28s);
}
@-webkit-keyframes particle-animation-29 {
100% {
-webkit-transform: translateX(calc(0.5376160336 * var(–horse-width) )) translateY(calc(-0.0082315601 * (var(–horse-height) / 5))) scale(4) rotate(-29.5deg);
transform: translateX(calc(0.5376160336 * var(–horse-width) )) translateY(calc(-0.0082315601 * (var(–horse-height) / 5))) scale(4) rotate(-29.5deg);
opacity: 0;
}
}
@keyframes particle-animation-29 {
100% {
-webkit-transform: translateX(calc(0.5376160336 * var(–horse-width) )) translateY(calc(-0.0082315601 * (var(–horse-height) / 5))) scale(4) rotate(-29.5deg);
transform: translateX(calc(0.5376160336 * var(–horse-width) )) translateY(calc(-0.0082315601 * (var(–horse-height) / 5))) scale(4) rotate(-29.5deg);
opacity: 0;
}
}
.particle:nth-child(29) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-29 var(–speed) ease-out infinite;
animation: particle-animation-29 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.29s);
animation-delay: calc((var(–speed) * 0.1) + 0.29s);
}
.dust.back .particle:nth-child(29) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.29s);
animation-delay: calc((var(–speed) * 0.68) + 0.29s);
}
@-webkit-keyframes particle-animation-30 {
100% {
-webkit-transform: translateX(calc(0.0762989803 * var(–horse-width) )) translateY(calc(-0.0025691103 * (var(–horse-height) / 5))) scale(6) rotate(-152deg);
transform: translateX(calc(0.0762989803 * var(–horse-width) )) translateY(calc(-0.0025691103 * (var(–horse-height) / 5))) scale(6) rotate(-152deg);
opacity: 0;
}
}
@keyframes particle-animation-30 {
100% {
-webkit-transform: translateX(calc(0.0762989803 * var(–horse-width) )) translateY(calc(-0.0025691103 * (var(–horse-height) / 5))) scale(6) rotate(-152deg);
transform: translateX(calc(0.0762989803 * var(–horse-width) )) translateY(calc(-0.0025691103 * (var(–horse-height) / 5))) scale(6) rotate(-152deg);
opacity: 0;
}
}
.particle:nth-child(30) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-30 var(–speed) ease-out infinite;
animation: particle-animation-30 var(–speed) ease-out infinite;
-webkit-animation-delay: calc((var(–speed) * 0.1) + 0.3s);
animation-delay: calc((var(–speed) * 0.1) + 0.3s);
}
.dust.back .particle:nth-child(30) {
-webkit-animation-delay: calc((var(–speed) * 0.68) + 0.3s);
animation-delay: calc((var(–speed) * 0.68) + 0.3s);
}
.🐴 {
width: var(–horse-width);
height: var(–horse-height);
border: 0px solid var(–outlines);
}
.🐴 *, .🐴 *:after, .🐴 *:before {
border: 1px dashed var(–outlines);
}
.🐴 > * {
position: absolute;
top: var(–part-y, 0);
left: var(–part-x, 0);
width: var(–part-width, 10px);
height: var(–part-height, 10px);
border-radius: var(–part-radius, 0);
-webkit-transform: rotate(var(–part-rotate, 0deg));
transform: rotate(var(–part-rotate, 0deg));
-webkit-transform-origin: var(–part-origin, 50% 50%);
transform-origin: var(–part-origin, 50% 50%);
-webkit-animation-delay: var(–delay, 0s) !important;
animation-delay: var(–delay, 0s) !important;
}
.🐴 > * *, .🐴 > * *:after, .🐴 > * *:before {
position: absolute;
background-color: var(–color-horse);
top: var(–shape-y, 0);
left: var(–shape-x, 0);
width: var(–shape-width, 10px);
height: var(–shape-height, 10px);
border-radius: var(–shape-radius, 0);
-webkit-transform: rotate(var(–shape-rotate, 0deg));
transform: rotate(var(–shape-rotate, 0deg));
-webkit-transform-origin: var(–shape-origin, 50% 50%);
transform-origin: var(–shape-origin, 50% 50%);
-webkit-animation-delay: var(–delay, 0s) !important;
animation-delay: var(–delay, 0s) !important;
}
/* ================
HEAD
================ */
.head {
–part-width: 20%;
–part-height: 15%;
–part-x: -1%;
–part-y: 3%;
–part-origin: 100% 50%;
–part-rotate: -40deg;
}
.head .skull {
–shape-width: 55%;
–shape-height: 80%;
–shape-radius: 50%;
–shape-x: 43%;
–shape-y: 10%;
–shape-rotate: 40deg;
}
.head .eye {
background-color: var(–color-horse-back);
–shape-width: 6%;
–shape-height: 10%;
–shape-radius: 30% 100%;
–shape-x: 45%;
–shape-y: 20%;
–shape-rotate: 0deg;
}
.head .face {
–shape-width: 47%;
–shape-height: 50%;
–shape-y: 8%;
–shape-x: 14%;
–shape-rotate: -5deg;
}
.head .nose {
–shape-x: 0%;
–shape-y: 11.7%;
–shape-width: 24%;
–shape-height: 35%;
–shape-radius: 50%;
–shape-rotate: -12deg;
}
.head .jaw {
–shape-width: 25%;
–shape-height: 60%;
–shape-x: 40%;
–shape-y: 37%;
–shape-radius: 45%;
-webkit-transform: skew(0deg) rotate(40deg);
transform: skew(0deg) rotate(40deg);
}
.head .lip {
–shape-rotate: 40deg;
–shape-x: -3%;
–shape-y: 28%;
–shape-radius: 30%;
–shape-width: 12%;
–shape-height: 25%;
}
.head .chin {
–shape-width: 15%;
–shape-height: 40%;
–shape-y: 31%;
–shape-x: 2%;
–shape-radius: 30%;
–shape-rotate: 40deg;
}
.head .chin:after {
content: ‘’;
–shape-width: 130%;
–shape-height: 180%;
–shape-radius: 0;
–shape-x: 123%;
–shape-y: -95%;
–shape-rotate: 70deg;
}
.head .ear {
–shape-width: 20%;
–shape-height: 15%;
–shape-y: 17%;
–shape-x: 78%;
–shape-radius: 50%;
–shape-rotate: 10deg;
–shape-origin: 0% 50%;
}
.head .ear:after {
content: ‘’;
–shape-width: 70%;
–shape-height: 40%;
–shape-y: 10%;
–shape-x: 65%;
–shape-radius: 40%;
–shape-rotate: -30deg;
}
.head .ear:before {
content: ‘’;
–shape-width: 70%;
–shape-height: 30%;
–shape-y: -20%;
–shape-x: 50%;
–shape-radius: 0%;
–shape-rotate: -5deg;
}
/* ================
NECK
================ */
.neck {
–part-width: 30%;
–part-height: 25%;
–part-x: 5%;
–part-y: 35%;
–part-origin: 90% 50%;
–part-rotate: 45deg;
}
.neck .under {
–shape-height: 40%;
–shape-width: 16%;
–shape-radius: 50%;
–shape-x: 11%;
–shape-y: 55%;
–shape-rotate: -19deg;
background-color: transparent;
border-top: 0.07rem outset var(–color-horse);
}
.neck .front {
–shape-width: 75%;
–shape-height: 55%;
–shape-radius: 50%;
–shape-y: 28%;
–shape-x: 7%;
–shape-rotate: 20deg;
}
.neck .top {
–shape-x: 10%;
–shape-y: 5%;
–shape-width: 50%;
–shape-height: 25%;
–shape-radius: 50% / 20%;
–shape-rotate: 0deg;
}
.neck .top:after {
content: ‘’;
–shape-x: 50%;
–shape-y: -10%;
–shape-width: 70%;
–shape-height: 50%;
–shape-radius: 0%;
–shape-rotate: -5deg;
}
.neck .base {
–shape-width:50%;
–shape-height:30%;
–shape-x: 20%;
–shape-y: 10%;
–shape-radius: 30%;
–shape-rotate: -10deg;
}
.neck .shoulder {
–shape-width:50%;
–shape-height:30%;
–shape-x: 48%;
–shape-y: -2%;
–shape-rotate: -20deg;
–shape-radius: 50%;
}
/* ================
BODY
================ */
.body {
–part-width: 55%;
–part-height: 33%;
–part-x: 20%;
–part-y: 30%;
–part-origin: 10% 50%;
}
.body .section {
–shape-width: 94%;
–shape-height: 90%;
–shape-x: 40%;
–shape-y: 5%;
–shape-origin: 10% 30%;
–shape-radius: 50% 0 20% 20%;
–shape-rotate: -9deg;
}
.body .section.last {
–shape-radius: 45%;
}
.body .section.last:after {
content: none;
}
.body > .section {
–shape-x: 4%;
–shape-y: 4%;
–shape-width: 32%;
–shape-height: 92%;
–shape-rotate: 10deg;
–shape-origin: 50% 50%;
–shape-radius: 45%;
}
.body > .section:after {
content: ‘’;
–shape-height: 70%;
–shape-width: 202%;
–shape-x: 40%;
–shape-y: 48%;
–shape-rotate: -23deg;
–shape-origin: 0% 100%;
–shape-radius: 50%;
}
.body .back-side {
–shape-x: 60%;
–shape-y: -10%;
–shape-width: 38%;
–shape-height: 70%;
–shape-origin: 0 0;
–shape-rotate: 8deg;
–shape-radius: 40% 50% 50%;
}
/* ================
TAIL
================ */
.tail {
–part-width: 35%;
–part-height: 18%;
–part-x: 63%;
–part-y: 29%;
–part-rotate: 10deg;
–part-origin: 0% 50%;
}
.tail .nub {
–shape-width: 35%;
–shape-height: 30%;
–shape-rotate: 4deg;
–shape-origin: 10% 50%;
–shape-radius: 20% / 50%;
background-color: var(–color-hair);
}
.tail .section {
–shape-width: 100%;
–shape-height: 90%;
–shape-rotate: 15deg;
–shape-origin: 0% 50%;
–shape-radius: 30% / 50%;
–shape-y: -25%;
–shape-x: 60%;
background-color: var(–color-hair);
}
.tail .section:after {
content: ‘’;
–shape-width: 170%;
–shape-height: 120%;
–shape-rotate: 6deg;
–shape-origin: 0% 50%;
–shape-radius: 50%;
–shape-y: -10%;
–shape-x: 0%;
background-color: transparent;
box-shadow: -1.5vmin 0.5vmin 0 0 var(–color-hair);
}
.tail .section:before {
content: ‘’;
–shape-width: 130%;
–shape-height: 100%;
–shape-rotate: -20deg;
–shape-origin: 0% 50%;
–shape-radius: 50%;
–shape-y: 0%;
–shape-x: 50%;
background-color: transparent;
box-shadow: -1.5vmin 1vmin 0 0 var(–color-hair);
}
.tail .nub > .section {
–shape-width: 50%;
–shape-height: 170%;
}
.tail .section > * > * {
–shape-rotate: 0deg;
–shape-height: 80%;
}
.tail .section > * > * > * > * {
–shape-rotate: -25deg;
–shape-height: 40%;
}
/* ================
FRONT LEG
================ */
.front-leg {
–part-width: 15%;
–part-height: 60%;
–part-x: 20%;
–part-y: 40%;
–part-origin: 100% 50%;
}
.front-leg.right {
–color-horse: var(–color-horse-back);
–delay: calc( 0s - var(–speed) / var(–delay-gap));
}
.front-leg .shoulder {
–shape-x: 20%;
–shape-width: 80%;
–shape-height: 35%;
–shape-origin: 100% 50%;
–shape-radius: 30% 30% 30% 50%;
–shape-rotate: -0deg;
}
.front-leg .upper {
–shape-x: 40%;
–shape-y: 60%;
–shape-width: 40%;
–shape-height: 80%;
–shape-origin: 40% 10%;
–shape-radius: 30% 30% 50% 50%;
–shape-rotate: 0deg;
}
.front-leg .upper:before {
content: ‘’;
–shape-x: 5%;
–shape-radius: 20%;
–shape-rotate: 0deg;
}
.front-leg .upper:after {
content: ‘’;
–shape-x: 40%;
–shape-y: 60%;
–shape-height: 78%;
–shape-radius: 40%;
–shape-rotate: 5deg;
}
.front-leg .knee {
–shape-x: 0%;
–shape-y: 120%;
–shape-width: 57%;
–shape-height: 55%;
–shape-radius: 45%;
–shape-origin: 40% 20%;
–shape-rotate: -0deg;
}
.front-leg .knee:before {
content: ‘’;
–shape-x: 0%;
–shape-y: 60%;
–shape-width: 30%;
–shape-height: 40%;
–shape-radius: 30%;
–shape-rotate: 0deg;
}
.front-leg .lower {
–shape-x: 0%;
–shape-y: 80%;
–shape-width: 54%;
–shape-height: 120%;
–shape-radius: 5%;
–shape-rotate: 12deg;
}
.front-leg .ankle {
–shape-x: -20%;
–shape-y: 80%;
–shape-width: 170%;
–shape-height: 45%;
–shape-radius: 50%;
–shape-rotate: 20deg;
}
.front-leg .foot {
–shape-x: -35%;
–shape-y: 65%;
–shape-width: 120%;
–shape-height: 200%;
–shape-radius: 0%;
–shape-rotate: 30deg;
-webkit-clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
}
.front-leg .hoof {
–shape-x: 40%;
–shape-y: 52%;
–shape-width: 100%;
–shape-height: 50%;
–shape-radius: 0%;
–shape-rotate: 55deg;
background-color: var(–color-hoof);
}
/* ================
BACK LEG
================ */
.back-leg {
–part-width: 20%;
–part-height: 70%;
–part-x: 60%;
–part-y: 30%;
–part-origin: 100% 50%;
}
.back-leg.right {
–color-horse: var(–color-horse-back);
–delay: calc( 0s - var(–speed) / var(–delay-gap));
}
.back-leg .top {
–shape-height: 20%;
–shape-width: 75%;
–shape-radius: 45%;
–shape-rotate: 25deg;
–shape-x: -8%;
background-color: transparent;
}
.back-leg .top:after {
content: ‘’;
–shape-height: 140%;
–shape-width: 40%;
–shape-radius: 50% / 30%;
–shape-rotate: -19deg;
–shape-x: 55%;
–shape-y: 20%;
–shape-origin: 50% 10%;
}
.back-leg .top:before {
content: ‘’;
–shape-height: 150%;
–shape-width: 80%;
–shape-radius: 50% / 60%;
–shape-rotate: -60deg;
–shape-x: 24%;
–shape-y: 58%;
}
.back-leg .thigh {
–shape-height: 140%;
–shape-width: 22%;
–shape-radius: 45% / 20%;
–shape-rotate: -95deg;
–shape-x: 75%;
–shape-y: 172%;
–shape-origin: 50% 0%;
}
.back-leg .thigh:before {
content: ‘’;
–shape-height: 80%;
–shape-width: 50%;
–shape-radius: 50%;
–shape-rotate: -15deg;
–shape-x: -66%;
–shape-y: -10%;
–shape-origin: 50% 0%;
}
.back-leg .thigh:after {
content: ‘’;
–shape-height: 40%;
–shape-width: 50%;
–shape-radius: 50%;
–shape-rotate: 20deg;
–shape-x: 110%;
–shape-y: 23%;
–shape-origin: 50% 50%;
background-color: transparent;
box-shadow: -1.2% 0.5% 0 0 var(–color-horse);
}
.back-leg .lower-leg {
–shape-height: 100%;
–shape-width: 60%;
–shape-radius: 50% / 10%;
–shape-rotate: 47deg;
–shape-x: 80%;
–shape-y: 88%;
–shape-origin: 50% 0%;
}
.back-leg .lower-leg:after {
content: ‘’;
–shape-height: 60%;
–shape-width: 100%;
–shape-radius: 50%;
–shape-rotate: -25deg;
–shape-x: -155%;
–shape-y: 8%;
–shape-origin: 50% 50%;
background-color: transparent;
box-shadow: 8px 1px 0 0 var(–color-horse);
}
.back-leg .foot {
–shape-x: -120%;
–shape-y: 100%;
–shape-width: 180%;
–shape-height: 60%;
–shape-radius: 0%;
–shape-rotate: -70deg;
-webkit-clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
}
.back-leg .hoof {
–shape-x: -10%;
–shape-y: 65%;
–shape-width: 100%;
–shape-height: 100%;
–shape-radius: 0%;
–shape-rotate: -5deg;
background-color: var(–color-hoof);
}
/* ================
ANIMATIONS
================ */
@-webkit-keyframes body {
0%, 100% {
-webkit-transform: rotate(8deg) translatex(2%) translatey(-5%);
transform: rotate(8deg) translatex(2%) translatey(-5%);
}
9% {
-webkit-transform: rotate(4deg) translatex(2%) translatey(0%);
transform: rotate(4deg) translatex(2%) translatey(0%);
}
18.1% {
-webkit-transform: rotate(1deg) translatex(0%) translatey(5%);
transform: rotate(1deg) translatex(0%) translatey(5%);
}
27.2% {
-webkit-transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
}
36.3% {
-webkit-transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
}
45.4% {
-webkit-transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
}
54.5% {
-webkit-transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
}
63.6% {
-webkit-transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
}
72.7% {
-webkit-transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
}
81.8% {
-webkit-transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
}
90.9% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
}
}
@keyframes body {
0%, 100% {
-webkit-transform: rotate(8deg) translatex(2%) translatey(-5%);
transform: rotate(8deg) translatex(2%) translatey(-5%);
}
9% {
-webkit-transform: rotate(4deg) translatex(2%) translatey(0%);
transform: rotate(4deg) translatex(2%) translatey(0%);
}
18.1% {
-webkit-transform: rotate(1deg) translatex(0%) translatey(5%);
transform: rotate(1deg) translatex(0%) translatey(5%);
}
27.2% {
-webkit-transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
}
36.3% {
-webkit-transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
}
45.4% {
-webkit-transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
}
54.5% {
-webkit-transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
}
63.6% {
-webkit-transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
}
72.7% {
-webkit-transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
}
81.8% {
-webkit-transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
}
90.9% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
}
}
.animate .body {
-webkit-animation: body var(–speed) linear infinite;
animation: body var(–speed) linear infinite;
}
@-webkit-keyframes front-shoulder {
0%, 100% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(6%);
transform: rotate(20deg) translatex(0%) translatey(6%);
}
8.3% {
-webkit-transform: rotate(8deg) translatex(-10%) translatey(0%);
transform: rotate(8deg) translatex(-10%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(0deg) translatex(-12%) translatey(-3%);
transform: rotate(0deg) translatex(-12%) translatey(-3%);
}
24.9% {
-webkit-transform: rotate(0deg) translatex(10%) translatey(0%);
transform: rotate(0deg) translatex(10%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-30deg) translatex(7%) translatey(-12%);
transform: rotate(-30deg) translatex(7%) translatey(-12%);
}
41.6% {
-webkit-transform: rotate(-30deg) translatex(11%) translatey(-10%);
transform: rotate(-30deg) translatex(11%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-20deg) translatex(10%) translatey(0%);
transform: rotate(-20deg) translatex(10%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-10deg) translatex(30%) translatey(-5%);
transform: rotate(-10deg) translatex(30%) translatey(-5%);
}
66.6% {
-webkit-transform: rotate(15deg) translatex(25%) translatey(5%);
transform: rotate(15deg) translatex(25%) translatey(5%);
}
74.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
}
@keyframes front-shoulder {
0%, 100% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(6%);
transform: rotate(20deg) translatex(0%) translatey(6%);
}
8.3% {
-webkit-transform: rotate(8deg) translatex(-10%) translatey(0%);
transform: rotate(8deg) translatex(-10%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(0deg) translatex(-12%) translatey(-3%);
transform: rotate(0deg) translatex(-12%) translatey(-3%);
}
24.9% {
-webkit-transform: rotate(0deg) translatex(10%) translatey(0%);
transform: rotate(0deg) translatex(10%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-30deg) translatex(7%) translatey(-12%);
transform: rotate(-30deg) translatex(7%) translatey(-12%);
}
41.6% {
-webkit-transform: rotate(-30deg) translatex(11%) translatey(-10%);
transform: rotate(-30deg) translatex(11%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-20deg) translatex(10%) translatey(0%);
transform: rotate(-20deg) translatex(10%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-10deg) translatex(30%) translatey(-5%);
transform: rotate(-10deg) translatex(30%) translatey(-5%);
}
66.6% {
-webkit-transform: rotate(15deg) translatex(25%) translatey(5%);
transform: rotate(15deg) translatex(25%) translatey(5%);
}
74.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
}
.animate .front-leg .shoulder {
-webkit-animation: front-shoulder var(–speed) linear infinite;
animation: front-shoulder var(–speed) linear infinite;
}
@-webkit-keyframes front-upper {
0%, 100% {
-webkit-transform: rotate(50deg) translatex(30%) translatey(8%);
transform: rotate(50deg) translatex(30%) translatey(8%);
}
8.3% {
-webkit-transform: rotate(45deg) translatex(40%) translatey(10%);
transform: rotate(45deg) translatex(40%) translatey(10%);
}
16.6% {
-webkit-transform: rotate(33deg) translatex(25%) translatey(10%);
transform: rotate(33deg) translatex(25%) translatey(10%);
}
24.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(18deg) translatex(7%) translatey(10%);
transform: rotate(18deg) translatex(7%) translatey(10%);
}
41.6% {
-webkit-transform: rotate(-8deg) translatex(-30%) translatey(15%);
transform: rotate(-8deg) translatex(-30%) translatey(15%);
}
49.9% {
-webkit-transform: rotate(-4deg) translatex(-20%) translatey(10%);
transform: rotate(-4deg) translatex(-20%) translatey(10%);
}
58.3% {
-webkit-transform: rotate(20deg) translatex(17%) translatey(10%);
transform: rotate(20deg) translatex(17%) translatey(10%);
}
66.6% {
-webkit-transform: rotate(30deg) translatex(20%) translatey(-10%);
transform: rotate(30deg) translatex(20%) translatey(-10%);
}
74.9% {
-webkit-transform: rotate(75deg) translatex(40%) translatey(-15%);
transform: rotate(75deg) translatex(40%) translatey(-15%);
}
83.3% {
-webkit-transform: rotate(85deg) translatex(15%) translatey(-10%);
transform: rotate(85deg) translatex(15%) translatey(-10%);
}
91.6% {
-webkit-transform: rotate(55deg) translatex(25%) translatey(-5%);
transform: rotate(55deg) translatex(25%) translatey(-5%);
}
}
@keyframes front-upper {
0%, 100% {
-webkit-transform: rotate(50deg) translatex(30%) translatey(8%);
transform: rotate(50deg) translatex(30%) translatey(8%);
}
8.3% {
-webkit-transform: rotate(45deg) translatex(40%) translatey(10%);
transform: rotate(45deg) translatex(40%) translatey(10%);
}
16.6% {
-webkit-transform: rotate(33deg) translatex(25%) translatey(10%);
transform: rotate(33deg) translatex(25%) translatey(10%);
}
24.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(18deg) translatex(7%) translatey(10%);
transform: rotate(18deg) translatex(7%) translatey(10%);
}
41.6% {
-webkit-transform: rotate(-8deg) translatex(-30%) translatey(15%);
transform: rotate(-8deg) translatex(-30%) translatey(15%);
}
49.9% {
-webkit-transform: rotate(-4deg) translatex(-20%) translatey(10%);
transform: rotate(-4deg) translatex(-20%) translatey(10%);
}
58.3% {
-webkit-transform: rotate(20deg) translatex(17%) translatey(10%);
transform: rotate(20deg) translatex(17%) translatey(10%);
}
66.6% {
-webkit-transform: rotate(30deg) translatex(20%) translatey(-10%);
transform: rotate(30deg) translatex(20%) translatey(-10%);
}
74.9% {
-webkit-transform: rotate(75deg) translatex(40%) translatey(-15%);
transform: rotate(75deg) translatex(40%) translatey(-15%);
}
83.3% {
-webkit-transform: rotate(85deg) translatex(15%) translatey(-10%);
transform: rotate(85deg) translatex(15%) translatey(-10%);
}
91.6% {
-webkit-transform: rotate(55deg) translatex(25%) translatey(-5%);
transform: rotate(55deg) translatex(25%) translatey(-5%);
}
}
.animate .front-leg .upper {
-webkit-animation: front-upper var(–speed) linear infinite;
animation: front-upper var(–speed) linear infinite;
}
@-webkit-keyframes front-knee {
0%, 100% {
-webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
transform: rotate(-15deg) translatex(0%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(-10deg) translatex(0%) translatey(0%);
transform: rotate(-10deg) translatex(0%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(-12deg) translatex(0%) translatey(0%);
transform: rotate(-12deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(-20deg) translatex(0%) translatey(0%);
transform: rotate(-20deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-55deg) translatex(-25%) translatey(10%);
transform: rotate(-55deg) translatex(-25%) translatey(10%);
}
41.6% {
-webkit-transform: rotate(-35deg) translatex(0%) translatey(-10%);
transform: rotate(-35deg) translatex(0%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-28deg) translatex(0%) translatey(0%);
transform: rotate(-28deg) translatex(0%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-90deg) translatex(-22%) translatey(0%);
transform: rotate(-90deg) translatex(-22%) translatey(0%);
}
66.6% {
-webkit-transform: rotate(-95deg) translatex(-30%) translatey(0%);
transform: rotate(-95deg) translatex(-30%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(-98deg) translatex(-10%) translatey(0%);
transform: rotate(-98deg) translatex(-10%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-80deg) translatex(-20%) translatey(8%);
transform: rotate(-80deg) translatex(-20%) translatey(8%);
}
91.6% {
-webkit-transform: rotate(-50deg) translatex(-30%) translatey(10%);
transform: rotate(-50deg) translatex(-30%) translatey(10%);
}
}
@keyframes front-knee {
0%, 100% {
-webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
transform: rotate(-15deg) translatex(0%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(-10deg) translatex(0%) translatey(0%);
transform: rotate(-10deg) translatex(0%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(-12deg) translatex(0%) translatey(0%);
transform: rotate(-12deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(-20deg) translatex(0%) translatey(0%);
transform: rotate(-20deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-55deg) translatex(-25%) translatey(10%);
transform: rotate(-55deg) translatex(-25%) translatey(10%);
}
41.6% {
-webkit-transform: rotate(-35deg) translatex(0%) translatey(-10%);
transform: rotate(-35deg) translatex(0%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-28deg) translatex(0%) translatey(0%);
transform: rotate(-28deg) translatex(0%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-90deg) translatex(-22%) translatey(0%);
transform: rotate(-90deg) translatex(-22%) translatey(0%);
}
66.6% {
-webkit-transform: rotate(-95deg) translatex(-30%) translatey(0%);
transform: rotate(-95deg) translatex(-30%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(-98deg) translatex(-10%) translatey(0%);
transform: rotate(-98deg) translatex(-10%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-80deg) translatex(-20%) translatey(8%);
transform: rotate(-80deg) translatex(-20%) translatey(8%);
}
91.6% {
-webkit-transform: rotate(-50deg) translatex(-30%) translatey(10%);
transform: rotate(-50deg) translatex(-30%) translatey(10%);
}
}
.animate .front-leg .knee {
-webkit-animation: front-knee var(–speed) linear infinite;
animation: front-knee var(–speed) linear infinite;
}
@-webkit-keyframes front-lower {
0%, 100% {
-webkit-transform: rotate(-25deg) translatex(20%) translatey(0%);
transform: rotate(-25deg) translatex(20%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(-10%);
transform: rotate(10deg) translatex(0%) translatey(-10%);
}
16.6% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(0%);
transform: rotate(10deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(12deg) translatex(0%) translatey(0%);
transform: rotate(12deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-12deg) translatex(7%) translatey(-12%);
transform: rotate(-12deg) translatex(7%) translatey(-12%);
}
41.6% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(-10%);
transform: rotate(0deg) translatex(0%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-23deg) translatex(20%) translatey(-20%);
transform: rotate(-23deg) translatex(20%) translatey(-20%);
}
58.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(-30%);
transform: rotate(0deg) translatex(0%) translatey(-30%);
}
66.6% {
-webkit-transform: rotate(-15deg) translatex(30%) translatey(-20%);
transform: rotate(-15deg) translatex(30%) translatey(-20%);
}
74.9% {
-webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
transform: rotate(-15deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-15deg) translatex(15%) translatey(0%);
transform: rotate(-15deg) translatex(15%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(-10deg) translatex(20%) translatey(-30%);
transform: rotate(-10deg) translatex(20%) translatey(-30%);
}
}
@keyframes front-lower {
0%, 100% {
-webkit-transform: rotate(-25deg) translatex(20%) translatey(0%);
transform: rotate(-25deg) translatex(20%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(-10%);
transform: rotate(10deg) translatex(0%) translatey(-10%);
}
16.6% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(0%);
transform: rotate(10deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(12deg) translatex(0%) translatey(0%);
transform: rotate(12deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-12deg) translatex(7%) translatey(-12%);
transform: rotate(-12deg) translatex(7%) translatey(-12%);
}
41.6% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(-10%);
transform: rotate(0deg) translatex(0%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-23deg) translatex(20%) translatey(-20%);
transform: rotate(-23deg) translatex(20%) translatey(-20%);
}
58.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(-30%);
transform: rotate(0deg) translatex(0%) translatey(-30%);
}
66.6% {
-webkit-transform: rotate(-15deg) translatex(30%) translatey(-20%);
transform: rotate(-15deg) translatex(30%) translatey(-20%);
}
74.9% {
-webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
transform: rotate(-15deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-15deg) translatex(15%) translatey(0%);
transform: rotate(-15deg) translatex(15%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(-10deg) translatex(20%) translatey(-30%);
transform: rotate(-10deg) translatex(20%) translatey(-30%);
}
}
.animate .front-leg .lower {
-webkit-animation: front-lower var(–speed) linear infinite;
animation: front-lower var(–speed) linear infinite;
}
@-webkit-keyframes front-ankle {
0%, 100% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(15deg) translatex(10%) translatey(0%);
transform: rotate(15deg) translatex(10%) translatey(0%);
}
41.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
49.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(-20%);
transform: rotate(0deg) translatex(0%) translatey(-20%);
}
66.6% {
-webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
transform: rotate(-30deg) translatex(0%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
transform: rotate(-30deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-10deg) translatex(0%) translatey(-20%);
transform: rotate(-10deg) translatex(0%) translatey(-20%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
}
@keyframes front-ankle {
0%, 100% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(15deg) translatex(10%) translatey(0%);
transform: rotate(15deg) translatex(10%) translatey(0%);
}
41.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
49.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(-20%);
transform: rotate(0deg) translatex(0%) translatey(-20%);
}
66.6% {
-webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
transform: rotate(-30deg) translatex(0%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
transform: rotate(-30deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-10deg) translatex(0%) translatey(-20%);
transform: rotate(-10deg) translatex(0%) translatey(-20%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
}
.animate .front-leg .ankle {
-webkit-animation: front-ankle var(–speed) linear infinite;
animation: front-ankle var(–speed) linear infinite;
}
@-webkit-keyframes front-foot {
0%, 100% {
-webkit-transform: rotate(-28deg) translatex(40%) translatey(0%);
transform: rotate(-28deg) translatex(40%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(-15deg) translatex(50%) translatey(0%);
transform: rotate(-15deg) translatex(50%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(-11deg) translatex(35%) translatey(0%);
transform: rotate(-11deg) translatex(35%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(50deg) translatex(0%) translatey(0%);
transform: rotate(50deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-10deg) translatex(50%) translatey(0%);
transform: rotate(-10deg) translatex(50%) translatey(0%);
}
41.6% {
-webkit-transform: rotate(-36deg) translatex(50%) translatey(0%);
transform: rotate(-36deg) translatex(50%) translatey(0%);
}
49.9% {
-webkit-transform: rotate(-30deg) translatex(32%) translatey(0%);
transform: rotate(-30deg) translatex(32%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-30deg) translatex(45%) translatey(0%);
transform: rotate(-30deg) translatex(45%) translatey(0%);
}
66.6% {
-webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
transform: rotate(-30deg) translatex(50%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
transform: rotate(-30deg) translatex(50%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
transform: rotate(-30deg) translatex(50%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(-50deg) translatex(50%) translatey(10%);
transform: rotate(-50deg) translatex(50%) translatey(10%);
}
}
@keyframes front-foot {
0%, 100% {
-webkit-transform: rotate(-28deg) translatex(40%) translatey(0%);
transform: rotate(-28deg) translatex(40%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(-15deg) translatex(50%) translatey(0%);
transform: rotate(-15deg) translatex(50%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(-11deg) translatex(35%) translatey(0%);
transform: rotate(-11deg) translatex(35%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(50deg) translatex(0%) translatey(0%);
transform: rotate(50deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-10deg) translatex(50%) translatey(0%);
transform: rotate(-10deg) translatex(50%) translatey(0%);
}
41.6% {
-webkit-transform: rotate(-36deg) translatex(50%) translatey(0%);
transform: rotate(-36deg) translatex(50%) translatey(0%);
}
49.9% {
-webkit-transform: rotate(-30deg) translatex(32%) translatey(0%);
transform: rotate(-30deg) translatex(32%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-30deg) translatex(45%) translatey(0%);
transform: rotate(-30deg) translatex(45%) translatey(0%);
}
66.6% {
-webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
transform: rotate(-30deg) translatex(50%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
transform: rotate(-30deg) translatex(50%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
transform: rotate(-30deg) translatex(50%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(-50deg) translatex(50%) translatey(10%);
transform: rotate(-50deg) translatex(50%) translatey(10%);
}
}
.animate .front-leg .foot {
-webkit-animation: front-foot var(–speed) linear infinite;
animation: front-foot var(–speed) linear infinite;
}
@-webkit-keyframes back-top {
0%, 100% {
-webkit-transform: rotate(0deg) translatex(-5%) translatey(50%);
transform: rotate(0deg) translatex(-5%) translatey(50%);
}
8.3% {
-webkit-transform: rotate(-5deg) translatex(-7%) translatey(38%);
transform: rotate(-5deg) translatex(-7%) translatey(38%);
}
16.6% {
-webkit-transform: rotate(-10deg) translatex(-14%) translatey(30%);
transform: rotate(-10deg) translatex(-14%) translatey(30%);
}
24.9% {
-webkit-transform: rotate(25deg) translatex(0%) translatey(10%);
transform: rotate(25deg) translatex(0%) translatey(10%);
}
33.3% {
-webkit-transform: rotate(32deg) translatex(-18%) translatey(25%);
transform: rotate(32deg) translatex(-18%) translatey(25%);
}
41.6% {
-webkit-transform: rotate(45deg) translatex(-5%) translatey(20%);
transform: rotate(45deg) translatex(-5%) translatey(20%);
}
49.9% {
-webkit-transform: rotate(65deg) translatex(10%) translatey(35%);
transform: rotate(65deg) translatex(10%) translatey(35%);
}
58.3% {
-webkit-transform: rotate(65deg) translatex(10%) translatey(40%);
transform: rotate(65deg) translatex(10%) translatey(40%);
}
66.6% {
-webkit-transform: rotate(75deg) translatex(20%) translatey(40%);
transform: rotate(75deg) translatex(20%) translatey(40%);
}
74.9% {
-webkit-transform: rotate(70deg) translatex(20%) translatey(45%);
transform: rotate(70deg) translatex(20%) translatey(45%);
}
83.3% {
-webkit-transform: rotate(60deg) translatex(25%) translatey(40%);
transform: rotate(60deg) translatex(25%) translatey(40%);
}
91.6% {
-webkit-transform: rotate(30deg) translatex(10%) translatey(40%);
transform: rotate(30deg) translatex(10%) translatey(40%);
}
}
@keyframes back-top {
0%, 100% {
-webkit-transform: rotate(0deg) translatex(-5%) translatey(50%);
transform: rotate(0deg) translatex(-5%) translatey(50%);
}
8.3% {
-webkit-transform: rotate(-5deg) translatex(-7%) translatey(38%);
transform: rotate(-5deg) translatex(-7%) translatey(38%);
}
16.6% {
-webkit-transform: rotate(-10deg) translatex(-14%) translatey(30%);
transform: rotate(-10deg) translatex(-14%) translatey(30%);
}
24.9% {
-webkit-transform: rotate(25deg) translatex(0%) translatey(10%);
transform: rotate(25deg) translatex(0%) translatey(10%);
}
33.3% {
-webkit-transform: rotate(32deg) translatex(-18%) translatey(25%);
transform: rotate(32deg) translatex(-18%) translatey(25%);
}
41.6% {
-webkit-transform: rotate(45deg) translatex(-5%) translatey(20%);
transform: rotate(45deg) translatex(-5%) translatey(20%);
}
49.9% {
-webkit-transform: rotate(65deg) translatex(10%) translatey(35%);
transform: rotate(65deg) translatex(10%) translatey(35%);
}
58.3% {
-webkit-transform: rotate(65deg) translatex(10%) translatey(40%);
transform: rotate(65deg) translatex(10%) translatey(40%);
}
66.6% {
-webkit-transform: rotate(75deg) translatex(20%) translatey(40%);
transform: rotate(75deg) translatex(20%) translatey(40%);
}
74.9% {
-webkit-transform: rotate(70deg) translatex(20%) translatey(45%);
transform: rotate(70deg) translatex(20%) translatey(45%);
}
83.3% {
-webkit-transform: rotate(60deg) translatex(25%) translatey(40%);
transform: rotate(60deg) translatex(25%) translatey(40%);
}
91.6% {
-webkit-transform: rotate(30deg) translatex(10%) translatey(40%);
transform: rotate(30deg) translatex(10%) translatey(40%);
}
}
.animate .back-leg .top {
-webkit-animation: back-top var(–speed) linear infinite;
animation: back-top var(–speed) linear infinite;
}
@-webkit-keyframes back-thigh {
0%, 100% {
-webkit-transform: rotate(-45deg) translatex(-30%) translatey(-10%);
transform: rotate(-45deg) translatex(-30%) translatey(-10%);
}
8.3% {
-webkit-transform: rotate(-45deg) translatex(-30%) translatey(-8%);
transform: rotate(-45deg) translatex(-30%) translatey(-8%);
}
16.6% {
-webkit-transform: rotate(-43deg) translatex(-35%) translatey(-10%);
transform: rotate(-43deg) translatex(-35%) translatey(-10%);
}
24.9% {
-webkit-transform: rotate(-95deg) translatex(0%) translatey(0%);
transform: rotate(-95deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-115deg) translatex(0%) translatey(10%);
transform: rotate(-115deg) translatex(0%) translatey(10%);
}
41.6% {
-webkit-transform: rotate(-130deg) translatex(20%) translatey(-5%);
transform: rotate(-130deg) translatex(20%) translatey(-5%);
}
49.9% {
-webkit-transform: rotate(-130deg) translatex(10%) translatey(0%);
transform: rotate(-130deg) translatex(10%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-90deg) translatex(80%) translatey(-20%);
transform: rotate(-90deg) translatex(80%) translatey(-20%);
}
66.6% {
-webkit-transform: rotate(-85deg) translatex(0%) translatey(-20%);
transform: rotate(-85deg) translatex(0%) translatey(-20%);
}
74.9% {
-webkit-transform: rotate(-65deg) translatex(5%) translatey(-10%);
transform: rotate(-65deg) translatex(5%) translatey(-10%);
}
83.3% {
-webkit-transform: rotate(-65deg) translatex(10%) translatey(-10%);
transform: rotate(-65deg) translatex(10%) translatey(-10%);
}
91.6% {
-webkit-transform: rotate(-75deg) translatex(-20%) translatey(-15%);
transform: rotate(-75deg) translatex(-20%) translatey(-15%);
}
}
@keyframes back-thigh {
0%, 100% {
-webkit-transform: rotate(-45deg) translatex(-30%) translatey(-10%);
transform: rotate(-45deg) translatex(-30%) translatey(-10%);
}
8.3% {
-webkit-transform: rotate(-45deg) translatex(-30%) translatey(-8%);
transform: rotate(-45deg) translatex(-30%) translatey(-8%);
}
16.6% {
-webkit-transform: rotate(-43deg) translatex(-35%) translatey(-10%);
transform: rotate(-43deg) translatex(-35%) translatey(-10%);
}
24.9% {
-webkit-transform: rotate(-95deg) translatex(0%) translatey(0%);
transform: rotate(-95deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-115deg) translatex(0%) translatey(10%);
transform: rotate(-115deg) translatex(0%) translatey(10%);
}
41.6% {
-webkit-transform: rotate(-130deg) translatex(20%) translatey(-5%);
transform: rotate(-130deg) translatex(20%) translatey(-5%);
}
49.9% {
-webkit-transform: rotate(-130deg) translatex(10%) translatey(0%);
transform: rotate(-130deg) translatex(10%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-90deg) translatex(80%) translatey(-20%);
transform: rotate(-90deg) translatex(80%) translatey(-20%);
}
66.6% {
-webkit-transform: rotate(-85deg) translatex(0%) translatey(-20%);
transform: rotate(-85deg) translatex(0%) translatey(-20%);
}
74.9% {
-webkit-transform: rotate(-65deg) translatex(5%) translatey(-10%);
transform: rotate(-65deg) translatex(5%) translatey(-10%);
}
83.3% {
-webkit-transform: rotate(-65deg) translatex(10%) translatey(-10%);
transform: rotate(-65deg) translatex(10%) translatey(-10%);
}
91.6% {
-webkit-transform: rotate(-75deg) translatex(-20%) translatey(-15%);
transform: rotate(-75deg) translatex(-20%) translatey(-15%);
}
}
.animate .back-leg .thigh {
-webkit-animation: back-thigh var(–speed) linear infinite;
animation: back-thigh var(–speed) linear infinite;
}
@-webkit-keyframes back-lower-leg {
0%, 100% {
-webkit-transform: rotate(40deg) translatex(0%) translatey(0%);
transform: rotate(40deg) translatex(0%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(30deg) translatex(-30%) translatey(0%);
transform: rotate(30deg) translatex(-30%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(28deg) translatex(-40%) translatey(0%);
transform: rotate(28deg) translatex(-40%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(47deg) translatex(0%) translatey(0%);
transform: rotate(47deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(78deg) translatex(0%) translatey(5%);
transform: rotate(78deg) translatex(0%) translatey(5%);
}
41.6% {
-webkit-transform: rotate(110deg) translatex(40%) translatey(10%);
transform: rotate(110deg) translatex(40%) translatey(10%);
}
49.9% {
-webkit-transform: rotate(115deg) translatex(50%) translatey(5%);
transform: rotate(115deg) translatex(50%) translatey(5%);
}
58.3% {
-webkit-transform: rotate(90deg) translatex(30%) translatey(5%);
transform: rotate(90deg) translatex(30%) translatey(5%);
}
66.6% {
-webkit-transform: rotate(76deg) translatex(0%) translatey(0%);
transform: rotate(76deg) translatex(0%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(50deg) translatex(-40%) translatey(-4%);
transform: rotate(50deg) translatex(-40%) translatey(-4%);
}
83.3% {
-webkit-transform: rotate(40deg) translatex(-20%) translatey(-5%);
transform: rotate(40deg) translatex(-20%) translatey(-5%);
}
91.6% {
-webkit-transform: rotate(70deg) translatex(0%) translatey(0%);
transform: rotate(70deg) translatex(0%) translatey(0%);
}
}
@keyframes back-lower-leg {
0%, 100% {
-webkit-transform: rotate(40deg) translatex(0%) translatey(0%);
transform: rotate(40deg) translatex(0%) translatey(0%);
}
8.3% {
-webkit-transform: rotate(30deg) translatex(-30%) translatey(0%);
transform: rotate(30deg) translatex(-30%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(28deg) translatex(-40%) translatey(0%);
transform: rotate(28deg) translatex(-40%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(47deg) translatex(0%) translatey(0%);
transform: rotate(47deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(78deg) translatex(0%) translatey(5%);
transform: rotate(78deg) translatex(0%) translatey(5%);
}
41.6% {
-webkit-transform: rotate(110deg) translatex(40%) translatey(10%);
transform: rotate(110deg) translatex(40%) translatey(10%);
}
49.9% {
-webkit-transform: rotate(115deg) translatex(50%) translatey(5%);
transform: rotate(115deg) translatex(50%) translatey(5%);
}
58.3% {
-webkit-transform: rotate(90deg) translatex(30%) translatey(5%);
transform: rotate(90deg) translatex(30%) translatey(5%);
}
66.6% {
-webkit-transform: rotate(76deg) translatex(0%) translatey(0%);
transform: rotate(76deg) translatex(0%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(50deg) translatex(-40%) translatey(-4%);
transform: rotate(50deg) translatex(-40%) translatey(-4%);
}
83.3% {
-webkit-transform: rotate(40deg) translatex(-20%) translatey(-5%);
transform: rotate(40deg) translatex(-20%) translatey(-5%);
}
91.6% {
-webkit-transform: rotate(70deg) translatex(0%) translatey(0%);
transform: rotate(70deg) translatex(0%) translatey(0%);
}
}
.animate .back-leg .lower-leg {
-webkit-animation: back-lower-leg var(–speed) linear infinite;
animation: back-lower-leg var(–speed) linear infinite;
}
@-webkit-keyframes back-foot {
0%, 100% {
-webkit-transform: rotate(40deg) translatex(0%) translatey(-20%);
transform: rotate(40deg) translatex(0%) translatey(-20%);
}
8.3% {
-webkit-transform: rotate(20deg) translatex(10%) translatey(-20%);
transform: rotate(20deg) translatex(10%) translatey(-20%);
}
16.6% {
-webkit-transform: rotate(-65deg) translatex(0%) translatey(0%);
transform: rotate(-65deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
transform: rotate(-70deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-60deg) translatex(20%) translatey(-10%);
transform: rotate(-60deg) translatex(20%) translatey(-10%);
}
41.6% {
-webkit-transform: rotate(-80deg) translatex(0%) translatey(0%);
transform: rotate(-80deg) translatex(0%) translatey(0%);
}
49.9% {
-webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
transform: rotate(-70deg) translatex(0%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-60deg) translatex(10%) translatey(-10%);
transform: rotate(-60deg) translatex(10%) translatey(-10%);
}
66.6% {
-webkit-transform: rotate(-43deg) translatex(20%) translatey(-10%);
transform: rotate(-43deg) translatex(20%) translatey(-10%);
}
74.9% {
-webkit-transform: rotate(-13deg) translatex(5%) translatey(-10%);
transform: rotate(-13deg) translatex(5%) translatey(-10%);
}
83.3% {
-webkit-transform: rotate(8deg) translatex(5%) translatey(-15%);
transform: rotate(8deg) translatex(5%) translatey(-15%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(15%) translatey(-20%);
transform: rotate(20deg) translatex(15%) translatey(-20%);
}
}
@keyframes back-foot {
0%, 100% {
-webkit-transform: rotate(40deg) translatex(0%) translatey(-20%);
transform: rotate(40deg) translatex(0%) translatey(-20%);
}
8.3% {
-webkit-transform: rotate(20deg) translatex(10%) translatey(-20%);
transform: rotate(20deg) translatex(10%) translatey(-20%);
}
16.6% {
-webkit-transform: rotate(-65deg) translatex(0%) translatey(0%);
transform: rotate(-65deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
transform: rotate(-70deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-60deg) translatex(20%) translatey(-10%);
transform: rotate(-60deg) translatex(20%) translatey(-10%);
}
41.6% {
-webkit-transform: rotate(-80deg) translatex(0%) translatey(0%);
transform: rotate(-80deg) translatex(0%) translatey(0%);
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
rotate(115deg) translatex(50%) translatey(5%);
}
58.3% {
-webkit-transform: rotate(90deg) translatex(30%) translatey(5%);
transform: rotate(90deg) translatex(30%) translatey(5%);
}
66.6% {
-webkit-transform: rotate(76deg) translatex(0%) translatey(0%);
transform: rotate(76deg) translatex(0%) translatey(0%);
}
74.9% {
-webkit-transform: rotate(50deg) translatex(-40%) translatey(-4%);
transform: rotate(50deg) translatex(-40%) translatey(-4%);
}
83.3% {
-webkit-transform: rotate(40deg) translatex(-20%) translatey(-5%);
transform: rotate(40deg) translatex(-20%) translatey(-5%);
}
91.6% {
-webkit-transform: rotate(70deg) translatex(0%) translatey(0%);
transform: rotate(70deg) translatex(0%) translatey(0%);
}
}
.animate .back-leg .lower-leg {
-webkit-animation: back-lower-leg var(–speed) linear infinite;
animation: back-lower-leg var(–speed) linear infinite;
}
@-webkit-keyframes back-foot {
0%, 100% {
-webkit-transform: rotate(40deg) translatex(0%) translatey(-20%);
transform: rotate(40deg) translatex(0%) translatey(-20%);
}
8.3% {
-webkit-transform: rotate(20deg) translatex(10%) translatey(-20%);
transform: rotate(20deg) translatex(10%) translatey(-20%);
}
16.6% {
-webkit-transform: rotate(-65deg) translatex(0%) translatey(0%);
transform: rotate(-65deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
transform: rotate(-70deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-60deg) translatex(20%) translatey(-10%);
transform: rotate(-60deg) translatex(20%) translatey(-10%);
}
41.6% {
-webkit-transform: rotate(-80deg) translatex(0%) translatey(0%);
transform: rotate(-80deg) translatex(0%) translatey(0%);
}
49.9% {
-webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
transform: rotate(-70deg) translatex(0%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-60deg) translatex(10%) translatey(-10%);
transform: rotate(-60deg) translatex(10%) translatey(-10%);
}
66.6% {
-webkit-transform: rotate(-43deg) translatex(20%) translatey(-10%);
transform: rotate(-43deg) translatex(20%) translatey(-10%);
}
74.9% {
-webkit-transform: rotate(-13deg) translatex(5%) translatey(-10%);
transform: rotate(-13deg) translatex(5%) translatey(-10%);
}
83.3% {
-webkit-transform: rotate(8deg) translatex(5%) translatey(-15%);
transform: rotate(8deg) translatex(5%) translatey(-15%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(15%) translatey(-20%);
transform: rotate(20deg) translatex(15%) translatey(-20%);
}
}
@keyframes back-foot {
0%, 100% {
-webkit-transform: rotate(40deg) translatex(0%) translatey(-20%);
transform: rotate(40deg) translatex(0%) translatey(-20%);
}
8.3% {
-webkit-transform: rotate(20deg) translatex(10%) translatey(-20%);
transform: rotate(20deg) translatex(10%) translatey(-20%);
}
16.6% {
-webkit-transform: rotate(-65deg) translatex(0%) translatey(0%);
transform: rotate(-65deg) translatex(0%) translatey(0%);
}
24.9% {
-webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
transform: rotate(-70deg) translatex(0%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-60deg) translatex(20%) translatey(-10%);
transform: rotate(-60deg) translatex(20%) translatey(-10%);
}
41.6% {
-webkit-transform: rotate(-80deg) translatex(0%) translatey(0%);
transform: rotate(-80deg) translatex(0%) translatey(0%);
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-XRO6nWhY-1713632209203)]
[外链图片转存中…(img-0b4gsPN0-1713632209204)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-JmY3lARv-1713632209204)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
[外链图片转存中…(img-8uCTLny1-1713632209204)]
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
