【前端】CSS3学习笔记（六）——动画
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
CSS3动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<ul><h1>
<a href="https://www.html5tricks.com/tag/css3%E5%8A%A8%E7%94%BB" target="_blank">CSS3动画</a>
</h1>
</ul>
<li><a href="https://www.html5tricks.com/css3-3d-plane.html" target="_blank">CSS3 3D飞机飞行动画DEMO演示</a>
</li>
<li><a href="https://www.html5tricks.com/pure-css3-fans.html" target="_blank">纯CSS3 电风扇动画DEMO演示</a>
</li>
<li><a href="https://www.html5tricks.com/pure-css3-horse-run.html" target="_blank">纯CSS3 骏马奔腾动画特效DEMO演示</a>
</li>
</div>
</body>
</html>
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<!-- https://www.runoob.com/css3/css3-animations.html-->
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
纯CSS3 电风扇动画DEMO演示
在线演示
纯 CSS3 电风扇动画DEMO演示 (html5tricks.com)
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯 CSS3 电风扇动画DEMO演示</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<input type="radio" name="fan" id="zero"/>
<input type="radio" name="fan" id="one" checked="true"/>
<input type="radio" name="fan" id="two"/>
<input type="radio" name="fan" id="three"/>
<div class="scene">
<div class="fan">
<div class="fan__base">
<div class="cuboid base">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fan__controls">
<label class="fan__control" for="zero">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
<label class="fan__control" for="one">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
<label class="fan__control" for="two">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
<label class="fan__control" for="three">
<div class="cuboid control">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</label>
</div>
<div class="fan__spine">
<div class="cuboid spine">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fan__head">
<div class="fan__rotater">
<div class="cuboid rotater">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
<div class="fan__stalk">
<div class="cuboid stalk">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="fan__barrel">
<div class="cuboid barrel">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="fan__housing">
<div class="fan__housing-rear"></div>
<div class="fan__blades">
<div class="fan__blade"></div>
<div class="fan__blade"></div>
<div class="fan__blade"></div>
</div>
<div class="fan__housing-front"><img src="https://assets.codepen.io/605876/avatar.png"/></div>
</div>
</div>
</div>
</div>
<!-- partial -->
<div style="text-align:center;clear:both;">
<script src="/statics.js" type="text/javascript"></script>
</div>
</body>
</html>
style.css
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
}
:root {
--blade-speed: 1;
--rotation: 25;
--fan-speed: 2;
--state: running;
--bg: #344c65;
--shade-one: #f2f2f2;
--shade-two: #e6e6e6;
--shade-three: #d9d9d9;
--shade-four: #ccc;
--shade-five: #bfbfbf;
--shade-six: #b3b3b3;
--shade-seven: #a6a6a6;
--shade-eight: #999;
--cage-one: rgba(255,255,255,0.4);
--cage-two: rgba(255,255,255,0.2);
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--bg);
overflow: hidden;
transform: scale(0.75);
}
img {
height: 20%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 1px);
filter: grayscale(1);
opacity: 0.5;
}
input[type="radio"] {
position: fixed;
top: 0;
left: 100%;
opacity: 0;
}
#zero:checked ~ .scene {
--blade-speed: 0;
--state: paused;
}
#zero:checked ~ .scene .fan__stalk {
transform: translate(-50%, 25%);
}
#one:checked ~ .scene {
--blade-speed: 1;
--state: running;
}
#one:checked ~ .scene .fan__control:nth-of-type(2) {
transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
transform: translate(0, 50%);
}
#two:checked ~ .scene {
--blade-speed: 0.5;
--state: running;
}
#two:checked ~ .scene .fan__control:nth-of-type(3) {
transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
transform: translate(0, 50%);
}
#three:checked ~ .scene {
--blade-speed: 0.25;
--state: running;
}
#three:checked ~ .scene .fan__control:nth-of-type(4) {
transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
transform: translate(0, 50%);
}
.cuboid {
width: 100%;
height: 100%;
position: relative;
}
.cuboid__side:nth-of-type(1) {
height: calc(var(--thickness) * 1vmin);
width: 100%;
position: absolute;
top: 0;
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
height: 100%;
width: calc(var(--thickness) * 1vmin);
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
width: 100%;
height: calc(var(--thickness) * 1vmin);
position: absolute;
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
height: 100%;
width: calc(var(--thickness) * 1vmin);
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
position: absolute;
top: 0;
left: 0;
}
.cuboid__side:nth-of-type(6) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
:root {
--height: 70vmin;
--width: 40vmin;
}
label {
transition: transform 0.1s;
cursor: pointer;
}
label:hover {
transform: translate(0, 20%);
}
label:active {
transform: translate(0, 40%);
}
.scene {
position: absolute;
height: var(--width);
width: var(--width);
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0vmin) rotateX(-24deg) rotateY(34deg) rotateX(90deg);
}
.fan {
height: var(--height);
width: var(--width);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(-90deg) rotateX(calc(var(--rotateX, 0) * 1deg)) rotateY(calc(var(--rotateY, 0) * 1deg));
}
.fan__base {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
height: 8%;
width: 80%;
}
.fan__controls {
height: 6%;
width: 50%;
position: absolute;
bottom: 6%;
left: 50%;
transform: translate3d(-50%, 0, calc(var(--width) * 0.3));
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 6%;
}
.fan__housing {
height: 150%;
width: 150%;
border-radius: 50%;
top: 50%;
left: 50%;
position: absolute;
border: 1vmin solid var(--shade-one);
background: var(--cage-one);
transform: translate3d(-50%, -50%, calc(var(--width) * 0.45));
}
.fan__housing-rear,
.fan__housing-front {
position: absolute;
top: 50%;
left: 50%;
height: 80%;
width: 80%;
background: var(--cage-two);
border-radius: 50%;
border: 1vmin solid var(--shade-one);
}
.fan__housing-front {
transform: translate3d(-50%, -50%, calc(var(--width) * 0.11));
}
.fan__housing-front:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 35%;
width: 35%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--shade-one);
}
.fan__housing-rear {
transform: translate3d(-50%, -50%, calc(var(--width) * -0.1));
border: 1vmin solid var(--shade-two);
}
.fan__head {
height: var(--width);
width: var(--width);
position: absolute;
top: 0;
left: 0;
transform: translate3d(0, 0, calc(var(--width) * -0.25));
-webkit-animation: fan calc(var(--fan-speed, 1) * 1s) infinite alternate ease-in-out var(--state);
animation: fan calc(var(--fan-speed, 1) * 1s) infinite alternate ease-in-out var(--state);
}
.fan__rotater {
top: 50%;
width: calc(var(--width) * 0.2);
height: calc(var(--width) * 0.2);
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.fan__spine {
height: 57.5%;
bottom: 8%;
width: 20%;
position: absolute;
left: 50%;
transform: translate3d(-50%, 0%, calc(var(--width) * -0.25));
}
.fan__stalk {
height: 150%;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
transition: transform 0.2s cubic-bezier(0, 1.4, 0.2, 1.4);
width: 25%;
position: absolute;
}
.fan__blades {
position: absolute;
top: 50%;
left: 50%;
height: 16%;
width: 16%;
transform: translate3d(-50%, -50%, -1px) rotate(0deg);
-webkit-animation: rotate calc(var(--blade-speed, 0) * 1s) infinite linear;
animation: rotate calc(var(--blade-speed, 0) * 1s) infinite linear;
}
.fan__blade {
height: 300%;
width: 100%;
background: var(--shade-one);
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 0;
transform: translate(-50%, 0) rotate(calc(var(--rotate, 0) * 1deg));
}
.fan__blade:nth-of-type(1) {
--rotate: 0;
}
.fan__blade:nth-of-type(2) {
--rotate: calc(360 / 3 * 1);
}
.fan__blade:nth-of-type(3) {
--rotate: calc(360 / 3 * 2);
}
.fan__barrel {
height: 22.5%;
width: 22.5%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, calc(var(--width) * 0.3));
}
.base {
--thickness: calc(40 * 0.8);
}
.base div {
background: var(--shade-two);
}
.base div:nth-of-type(1) {
background: var(--shade-one);
}
.base div:nth-of-type(5) {
background: var(--shade-three);
}
.base div:nth-of-type(4) {
background: va(--shade-six);
}
.control {
--thickness: calc(((40 * 0.5) - ((40 * 0.5) * 0.18)) / 3);
}
.control div {
background: var(--shade-five);
}
.control div:nth-of-type(1) {
background: var(--shade-three);
}
.control div:nth-of-type(5) {
background: var(--shade-six);
}
.control div:nth-of-type(4) {
background: va(--shade-eight);
}
.fan__control:nth-of-type(1) .control {
--shade-three: #f7d4ba;
--shade-five: #f2b78c;
--shade-six: #f0a875;
--shade-eight: #eb8b47;
}
.spine {
--thickness: calc(40 * 0.2);
}
.spine div {
background: var(--shade-three);
}
.spine div:nth-of-type(1) {
background: var(--shade-two);
}
.spine div:nth-of-type(5) {
background: var(--shade-four);
}
.spine div:nth-of-type(4) {
background: va(--shade-seven);
}
.rotater {
--thickness: calc(40 * 0.2);
}
.rotater div {
background: var(--shade-two);
}
.rotater div:nth-of-type(1) {
background: var(--shade-one);
}
.rotater div:nth-of-type(5) {
background: var(--shade-three);
}
.rotater div:nth-of-type(4) {
background: va(--shade-six);
}
.barrel {
--thickness: calc(40 * 0.5);
}
.barrel div {
background: var(--shade-three);
}
.barrel div:nth-of-type(1) {
background: var(--shade-two);
}
.barrel div:nth-of-type(5) {
background: var(--shade-four);
}
.barrel div:nth-of-type(4) {
background: va(--shade-seven);
}
.stalk {
--thickness: calc(40 * 0.05);
}
.stalk div {
background: var(--shade-four);
}
.stalk div:nth-of-type(1) {
background: var(--shade-three);
}
.stalk div:nth-of-type(5) {
background: var(--shade-five);
}
.stalk div:nth-of-type(4) {
background: va(--shade-eight);
}
@-webkit-keyframes fan {
0%, 5% {
transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * 1deg));
}
95%, 100% {
transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * -1deg));
}
}
@keyframes fan {
0%, 5% {
transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * 1deg));
}
95%, 100% {
transform: translate3d(0, 0, calc(var(--width) * -0.25)) rotateY(calc(var(--rotation, 0) * -1deg));
}
}
@-webkit-keyframes rotate {
from {
transform: translate3d(-50%, -50%, -1px) rotate(0deg);
}
to {
transform: translate3d(-50%, -50%, -1px) rotate(360deg);
}
}
@keyframes rotate {
from {
transform: translate3d(-50%, -50%, -1px) rotate(0deg);
}
to {
transform: translate3d(-50%, -50%, -1px) rotate(360deg);
}
}
纯CSS3 骏马奔腾动画特效DEMO演示
在线演示
纯CSS3骏马奔腾动画特效DEMO演示 (html5tricks.com)
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3骏马奔腾动画特效DEMO演示</title>
</head>
<body style="margin:0;padding:0;">
<iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
index2.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3骏马奔腾动画特效DEMO演示</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<input type="checkbox" id="toggle" >
<label for="toggle">
<div class="floor"></div>
<div class="🐴 animate">
<div class="front-leg right">
<div class="shoulder">
<div class="upper">
<div class="knee">
<div class="lower">
<div class="ankle">
<div class="foot">
<div class="hoof"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="back-leg right">
<div class="top">
<div class="thigh">
<div class="lower-leg">
<div class="foot">
<div class="hoof"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tail">
<div class="nub">
<div class="section">
<div class="section">
<div class="section">
<div class="section">
<div class="section">
<div class="section last">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body">
<div class="section">
<div class="section">
<div class="section">
<div class="section">
<div class="section last">
</div>
</div>
</div>
</div>
</div>
<div class="back-side"></div>
</div>
<div class="neck">
<div class="under"></div>
<div class="front"></div>
<div class="base"></div>
<div class="top"></div>
<div class="shoulder"></div>
</div>
<div class="front-leg left">
<div class="shoulder">
<div class="upper">
<div class="knee">
<div class="lower">
<div class="ankle">
<div class="foot">
<div class="hoof"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="back-leg left">
<div class="top">
<div class="thigh">
<div class="lower-leg">
<div class="foot">
<div class="hoof"></div>
</div>
</div>
</div>
</div>
</div>
<div class="head">
<div class="skull"></div>
<div class="nose"></div>
<div class="face"></div>
<div class="lip"></div>
<div class="jaw"></div>
<div class="chin"></div>
<div class="ear"></div>
<div class="eye"></div>
</div>
</div>
<div class="dust front">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="dust back">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
</label>
</body>
</html>
style.css
@charset "UTF-8";
/*
Click the horse for slow-mo :)
*/
:root {
font-size: 22vmin;
--outlines: transparent;
--speed: 0.8s;
--delay-gap: 8;
--horse-width: 3.8rem;
--horse-height: 2.5rem;
--color-horse: rgba(50, 50, 50, 1);
--color-horse-back: rgba(30, 30, 30, 1);
--color-hair: rgba(70, 70, 70, 1);
--color-hoof: rgba(0, 0, 0, 1);
--color-dust: #AF540B;
--color-floor: #F1D1AF;
--color-sky: #C4C4FF;
}
input[type=checkbox] {
opacity: 0;
}
input[type=checkbox]:checked ~ label {
--outlines: white;
--speed: 8s;
--color-horse: rgba(50, 50, 50, 0.3);
--color-horse-back: rgba(30, 30, 30, 0.3);
--color-hair: rgba(70, 70, 70, 0.3);
--color-hoof: rgba(0, 0, 0, 0.3);
}
* {
position: relative;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: linear-gradient(0deg, #ffa44e 30%, #00d4ff 100%);
}
body {
display: flex;
justify-content: center;
align-items: center;
}
label {
cursor: pointer;
}
.dust {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: calc(((100vh - var(--horse-height)) / 2) + 0.02rem);
overflow: hidden;
}
.floor {
background-color: var(--color-floor);
background: linear-gradient(9deg, #e8d9be 0%, #A95108 100%);
position: fixed;
top: calc(50vh + (var(--horse-height) / 2) - 0.5rem);
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.dust .particle {
background-color: var(--color-dust);
width: 0.05rem;
height: 0.05rem;
border-radius: 50%;
position: absolute;
border: 1px dashed var(--outlines);
top: calc(50vh + (var(--horse-height) / 2) - 0.05rem);
left: calc(50vw - (var(--horse-width) / 2) + (var(--horse-width) * 0.15));
}
.dust.back .particle {
left: calc(50vw - (var(--horse-width) / 2) + (var(--horse-width) * 0.5));
}
@-webkit-keyframes particle-animation-1 {
100% {
-webkit-transform: translateX(calc(0.7371588301 * var(--horse-width) )) translateY(calc(-0.0046243842 * (var(--horse-height) / 5))) scale(3) rotate(-67.5deg);
transform: translateX(calc(0.7371588301 * var(--horse-width) )) translateY(calc(-0.0046243842 * (var(--horse-height) / 5))) scale(3) rotate(-67.5deg);
opacity: 0;
}
}
@keyframes particle-animation-1 {
100% {
-webkit-transform: translateX(calc(0.7371588301 * var(--horse-width) )) translateY(calc(-0.0046243842 * (var(--horse-height) / 5))) scale(3) rotate(-67.5deg);
transform: translateX(calc(0.7371588301 * var(--horse-width) )) translateY(calc(-0.0046243842 * (var(--horse-height) / 5))) scale(3) rotate(-67.5deg);
opacity: 0;
}
}
.particle:nth-child(1) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-1 var(--speed) ease-out infinite;
animation: particle-animation-1 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.01s);
animation-delay: calc((var(--speed) * 0.1) + 0.01s);
}
.dust.back .particle:nth-child(1) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.01s);
animation-delay: calc((var(--speed) * 0.68) + 0.01s);
}
@-webkit-keyframes particle-animation-2 {
100% {
-webkit-transform: translateX(calc(0.7619225349 * var(--horse-width) )) translateY(calc(-0.0076074579 * (var(--horse-height) / 5))) scale(3) rotate(-127.5deg);
transform: translateX(calc(0.7619225349 * var(--horse-width) )) translateY(calc(-0.0076074579 * (var(--horse-height) / 5))) scale(3) rotate(-127.5deg);
opacity: 0;
}
}
@keyframes particle-animation-2 {
100% {
-webkit-transform: translateX(calc(0.7619225349 * var(--horse-width) )) translateY(calc(-0.0076074579 * (var(--horse-height) / 5))) scale(3) rotate(-127.5deg);
transform: translateX(calc(0.7619225349 * var(--horse-width) )) translateY(calc(-0.0076074579 * (var(--horse-height) / 5))) scale(3) rotate(-127.5deg);
opacity: 0;
}
}
.particle:nth-child(2) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-2 var(--speed) ease-out infinite;
animation: particle-animation-2 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.02s);
animation-delay: calc((var(--speed) * 0.1) + 0.02s);
}
.dust.back .particle:nth-child(2) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.02s);
animation-delay: calc((var(--speed) * 0.68) + 0.02s);
}
@-webkit-keyframes particle-animation-3 {
100% {
-webkit-transform: translateX(calc(0.3935045854 * var(--horse-width) )) translateY(calc(-0.0042988641 * (var(--horse-height) / 5))) scale(3) rotate(-175deg);
transform: translateX(calc(0.3935045854 * var(--horse-width) )) translateY(calc(-0.0042988641 * (var(--horse-height) / 5))) scale(3) rotate(-175deg);
opacity: 0;
}
}
@keyframes particle-animation-3 {
100% {
-webkit-transform: translateX(calc(0.3935045854 * var(--horse-width) )) translateY(calc(-0.0042988641 * (var(--horse-height) / 5))) scale(3) rotate(-175deg);
transform: translateX(calc(0.3935045854 * var(--horse-width) )) translateY(calc(-0.0042988641 * (var(--horse-height) / 5))) scale(3) rotate(-175deg);
opacity: 0;
}
}
.particle:nth-child(3) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-3 var(--speed) ease-out infinite;
animation: particle-animation-3 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.03s);
animation-delay: calc((var(--speed) * 0.1) + 0.03s);
}
.dust.back .particle:nth-child(3) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.03s);
animation-delay: calc((var(--speed) * 0.68) + 0.03s);
}
@-webkit-keyframes particle-animation-4 {
100% {
-webkit-transform: translateX(calc(0.3462683656 * var(--horse-width) )) translateY(calc(-0.008756907 * (var(--horse-height) / 5))) scale(6) rotate(-70.5deg);
transform: translateX(calc(0.3462683656 * var(--horse-width) )) translateY(calc(-0.008756907 * (var(--horse-height) / 5))) scale(6) rotate(-70.5deg);
opacity: 0;
}
}
@keyframes particle-animation-4 {
100% {
-webkit-transform: translateX(calc(0.3462683656 * var(--horse-width) )) translateY(calc(-0.008756907 * (var(--horse-height) / 5))) scale(6) rotate(-70.5deg);
transform: translateX(calc(0.3462683656 * var(--horse-width) )) translateY(calc(-0.008756907 * (var(--horse-height) / 5))) scale(6) rotate(-70.5deg);
opacity: 0;
}
}
.particle:nth-child(4) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-4 var(--speed) ease-out infinite;
animation: particle-animation-4 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.04s);
animation-delay: calc((var(--speed) * 0.1) + 0.04s);
}
.dust.back .particle:nth-child(4) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.04s);
animation-delay: calc((var(--speed) * 0.68) + 0.04s);
}
@-webkit-keyframes particle-animation-5 {
100% {
-webkit-transform: translateX(calc(0.1457527891 * var(--horse-width) )) translateY(calc(-0.001629951 * (var(--horse-height) / 5))) scale(3) rotate(-51deg);
transform: translateX(calc(0.1457527891 * var(--horse-width) )) translateY(calc(-0.001629951 * (var(--horse-height) / 5))) scale(3) rotate(-51deg);
opacity: 0;
}
}
@keyframes particle-animation-5 {
100% {
-webkit-transform: translateX(calc(0.1457527891 * var(--horse-width) )) translateY(calc(-0.001629951 * (var(--horse-height) / 5))) scale(3) rotate(-51deg);
transform: translateX(calc(0.1457527891 * var(--horse-width) )) translateY(calc(-0.001629951 * (var(--horse-height) / 5))) scale(3) rotate(-51deg);
opacity: 0;
}
}
.particle:nth-child(5) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-5 var(--speed) ease-out infinite;
animation: particle-animation-5 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.05s);
animation-delay: calc((var(--speed) * 0.1) + 0.05s);
}
.dust.back .particle:nth-child(5) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.05s);
animation-delay: calc((var(--speed) * 0.68) + 0.05s);
}
@-webkit-keyframes particle-animation-6 {
100% {
-webkit-transform: translateX(calc(0.4117105754 * var(--horse-width) )) translateY(calc(-0.0001781605 * (var(--horse-height) / 5))) scale(4) rotate(-7.5deg);
transform: translateX(calc(0.4117105754 * var(--horse-width) )) translateY(calc(-0.0001781605 * (var(--horse-height) / 5))) scale(4) rotate(-7.5deg);
opacity: 0;
}
}
@keyframes particle-animation-6 {
100% {
-webkit-transform: translateX(calc(0.4117105754 * var(--horse-width) )) translateY(calc(-0.0001781605 * (var(--horse-height) / 5))) scale(4) rotate(-7.5deg);
transform: translateX(calc(0.4117105754 * var(--horse-width) )) translateY(calc(-0.0001781605 * (var(--horse-height) / 5))) scale(4) rotate(-7.5deg);
opacity: 0;
}
}
.particle:nth-child(6) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-6 var(--speed) ease-out infinite;
animation: particle-animation-6 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.06s);
animation-delay: calc((var(--speed) * 0.1) + 0.06s);
}
.dust.back .particle:nth-child(6) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.06s);
animation-delay: calc((var(--speed) * 0.68) + 0.06s);
}
@-webkit-keyframes particle-animation-7 {
100% {
-webkit-transform: translateX(calc(0.6143599614 * var(--horse-width) )) translateY(calc(-0.0013736645 * (var(--horse-height) / 5))) scale(5) rotate(-20.5deg);
transform: translateX(calc(0.6143599614 * var(--horse-width) )) translateY(calc(-0.0013736645 * (var(--horse-height) / 5))) scale(5) rotate(-20.5deg);
opacity: 0;
}
}
@keyframes particle-animation-7 {
100% {
-webkit-transform: translateX(calc(0.6143599614 * var(--horse-width) )) translateY(calc(-0.0013736645 * (var(--horse-height) / 5))) scale(5) rotate(-20.5deg);
transform: translateX(calc(0.6143599614 * var(--horse-width) )) translateY(calc(-0.0013736645 * (var(--horse-height) / 5))) scale(5) rotate(-20.5deg);
opacity: 0;
}
}
.particle:nth-child(7) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-7 var(--speed) ease-out infinite;
animation: particle-animation-7 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.07s);
animation-delay: calc((var(--speed) * 0.1) + 0.07s);
}
.dust.back .particle:nth-child(7) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.07s);
animation-delay: calc((var(--speed) * 0.68) + 0.07s);
}
@-webkit-keyframes particle-animation-8 {
100% {
-webkit-transform: translateX(calc(0.0464402655 * var(--horse-width) )) translateY(calc(-0.0020006211 * (var(--horse-height) / 5))) scale(6) rotate(-140deg);
transform: translateX(calc(0.0464402655 * var(--horse-width) )) translateY(calc(-0.0020006211 * (var(--horse-height) / 5))) scale(6) rotate(-140deg);
opacity: 0;
}
}
@keyframes particle-animation-8 {
100% {
-webkit-transform: translateX(calc(0.0464402655 * var(--horse-width) )) translateY(calc(-0.0020006211 * (var(--horse-height) / 5))) scale(6) rotate(-140deg);
transform: translateX(calc(0.0464402655 * var(--horse-width) )) translateY(calc(-0.0020006211 * (var(--horse-height) / 5))) scale(6) rotate(-140deg);
opacity: 0;
}
}
.particle:nth-child(8) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-8 var(--speed) ease-out infinite;
animation: particle-animation-8 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.08s);
animation-delay: calc((var(--speed) * 0.1) + 0.08s);
}
.dust.back .particle:nth-child(8) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.08s);
animation-delay: calc((var(--speed) * 0.68) + 0.08s);
}
@-webkit-keyframes particle-animation-9 {
100% {
-webkit-transform: translateX(calc(0.206322564 * var(--horse-width) )) translateY(calc(-0.0001571549 * (var(--horse-height) / 5))) scale(4) rotate(-52.5deg);
transform: translateX(calc(0.206322564 * var(--horse-width) )) translateY(calc(-0.0001571549 * (var(--horse-height) / 5))) scale(4) rotate(-52.5deg);
opacity: 0;
}
}
@keyframes particle-animation-9 {
100% {
-webkit-transform: translateX(calc(0.206322564 * var(--horse-width) )) translateY(calc(-0.0001571549 * (var(--horse-height) / 5))) scale(4) rotate(-52.5deg);
transform: translateX(calc(0.206322564 * var(--horse-width) )) translateY(calc(-0.0001571549 * (var(--horse-height) / 5))) scale(4) rotate(-52.5deg);
opacity: 0;
}
}
.particle:nth-child(9) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-9 var(--speed) ease-out infinite;
animation: particle-animation-9 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.09s);
animation-delay: calc((var(--speed) * 0.1) + 0.09s);
}
.dust.back .particle:nth-child(9) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.09s);
animation-delay: calc((var(--speed) * 0.68) + 0.09s);
}
@-webkit-keyframes particle-animation-10 {
100% {
-webkit-transform: translateX(calc(0.3972229927 * var(--horse-width) )) translateY(calc(-0.0008722193 * (var(--horse-height) / 5))) scale(4) rotate(-75deg);
transform: translateX(calc(0.3972229927 * var(--horse-width) )) translateY(calc(-0.0008722193 * (var(--horse-height) / 5))) scale(4) rotate(-75deg);
opacity: 0;
}
}
@keyframes particle-animation-10 {
100% {
-webkit-transform: translateX(calc(0.3972229927 * var(--horse-width) )) translateY(calc(-0.0008722193 * (var(--horse-height) / 5))) scale(4) rotate(-75deg);
transform: translateX(calc(0.3972229927 * var(--horse-width) )) translateY(calc(-0.0008722193 * (var(--horse-height) / 5))) scale(4) rotate(-75deg);
opacity: 0;
}
}
.particle:nth-child(10) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-10 var(--speed) ease-out infinite;
animation: particle-animation-10 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.1s);
animation-delay: calc((var(--speed) * 0.1) + 0.1s);
}
.dust.back .particle:nth-child(10) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.1s);
animation-delay: calc((var(--speed) * 0.68) + 0.1s);
}
@-webkit-keyframes particle-animation-11 {
100% {
-webkit-transform: translateX(calc(0.5284290868 * var(--horse-width) )) translateY(calc(-0.0073836283 * (var(--horse-height) / 5))) scale(6) rotate(-34.5deg);
transform: translateX(calc(0.5284290868 * var(--horse-width) )) translateY(calc(-0.0073836283 * (var(--horse-height) / 5))) scale(6) rotate(-34.5deg);
opacity: 0;
}
}
@keyframes particle-animation-11 {
100% {
-webkit-transform: translateX(calc(0.5284290868 * var(--horse-width) )) translateY(calc(-0.0073836283 * (var(--horse-height) / 5))) scale(6) rotate(-34.5deg);
transform: translateX(calc(0.5284290868 * var(--horse-width) )) translateY(calc(-0.0073836283 * (var(--horse-height) / 5))) scale(6) rotate(-34.5deg);
opacity: 0;
}
}
.particle:nth-child(11) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-11 var(--speed) ease-out infinite;
animation: particle-animation-11 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.11s);
animation-delay: calc((var(--speed) * 0.1) + 0.11s);
}
.dust.back .particle:nth-child(11) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.11s);
animation-delay: calc((var(--speed) * 0.68) + 0.11s);
}
@-webkit-keyframes particle-animation-12 {
100% {
-webkit-transform: translateX(calc(0.2908808199 * var(--horse-width) )) translateY(calc(-0.0003511397 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
transform: translateX(calc(0.2908808199 * var(--horse-width) )) translateY(calc(-0.0003511397 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
opacity: 0;
}
}
@keyframes particle-animation-12 {
100% {
-webkit-transform: translateX(calc(0.2908808199 * var(--horse-width) )) translateY(calc(-0.0003511397 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
transform: translateX(calc(0.2908808199 * var(--horse-width) )) translateY(calc(-0.0003511397 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
opacity: 0;
}
}
.particle:nth-child(12) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-12 var(--speed) ease-out infinite;
animation: particle-animation-12 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.12s);
animation-delay: calc((var(--speed) * 0.1) + 0.12s);
}
.dust.back .particle:nth-child(12) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.12s);
animation-delay: calc((var(--speed) * 0.68) + 0.12s);
}
@-webkit-keyframes particle-animation-13 {
100% {
-webkit-transform: translateX(calc(0.6913899953 * var(--horse-width) )) translateY(calc(-0.0048613636 * (var(--horse-height) / 5))) scale(4) rotate(-69.5deg);
transform: translateX(calc(0.6913899953 * var(--horse-width) )) translateY(calc(-0.0048613636 * (var(--horse-height) / 5))) scale(4) rotate(-69.5deg);
opacity: 0;
}
}
@keyframes particle-animation-13 {
100% {
-webkit-transform: translateX(calc(0.6913899953 * var(--horse-width) )) translateY(calc(-0.0048613636 * (var(--horse-height) / 5))) scale(4) rotate(-69.5deg);
transform: translateX(calc(0.6913899953 * var(--horse-width) )) translateY(calc(-0.0048613636 * (var(--horse-height) / 5))) scale(4) rotate(-69.5deg);
opacity: 0;
}
}
.particle:nth-child(13) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-13 var(--speed) ease-out infinite;
animation: particle-animation-13 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.13s);
animation-delay: calc((var(--speed) * 0.1) + 0.13s);
}
.dust.back .particle:nth-child(13) {
-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%);
}
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%);
}
}
.animate .back-leg .foot {
-webkit-animation: back-foot var(--speed) linear infinite;
animation: back-foot var(--speed) linear infinite;
}
@-webkit-keyframes neck {
0%, 100% {
-webkit-transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
}
/* 8.3% { transform: scaleX(1) rotate(40deg) translatex(2%) translatey(-10%); } */
16.6% {
-webkit-transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
}
/* 24.9% { transform: scaleX(0.9) rotate(40deg) translatex(5%) translatey(-5%); } */
33.3% {
-webkit-transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
}
/* 41.6% { transform: scaleX(0.9) rotate(50deg) translatex(3%) translatey(5%); } */
49.9% {
-webkit-transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
}
/* 58.3% { transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-10%); } */
66.6% {
-webkit-transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
}
/* 74.9% { transform: scaleX(0.9) rotate(34deg) translatex(0%) translatey(-15%); } */
83.3% {
-webkit-transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
}
/* 91.6% { transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-10%); } */
}
@keyframes neck {
0%, 100% {
-webkit-transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
}
/* 8.3% { transform: scaleX(1) rotate(40deg) translatex(2%) translatey(-10%); } */
16.6% {
-webkit-transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
}
/* 24.9% { transform: scaleX(0.9) rotate(40deg) translatex(5%) translatey(-5%); } */
33.3% {
-webkit-transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
}
/* 41.6% { transform: scaleX(0.9) rotate(50deg) translatex(3%) translatey(5%); } */
49.9% {
-webkit-transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
}
/* 58.3% { transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-10%); } */
66.6% {
-webkit-transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
}
/* 74.9% { transform: scaleX(0.9) rotate(34deg) translatex(0%) translatey(-15%); } */
83.3% {
-webkit-transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
}
/* 91.6% { transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-10%); } */
}
.animate .neck {
-webkit-animation: neck var(--speed) linear infinite;
animation: neck var(--speed) linear infinite;
}
@-webkit-keyframes head {
0%, 100% {
-webkit-transform: rotate(-45deg) translatex(-5%) translatey(10%);
transform: rotate(-45deg) translatex(-5%) translatey(10%);
}
/* 8.3% { transform: rotate(-45deg) translatex(-5%) translatey(12%); } */
16.6% {
-webkit-transform: rotate(-45deg) translatex(0%) translatey(15%);
transform: rotate(-45deg) translatex(0%) translatey(15%);
}
/* 24.9% { transform: rotate(-43deg) translatex(0%) translatey(20%); } */
33.3% {
-webkit-transform: rotate(-40deg) translatex(5%) translatey(23%);
transform: rotate(-40deg) translatex(5%) translatey(23%);
}
/* 41.6% { transform: rotate(-40deg) translatex(10%) translatey(23%); } */
49.9% {
-webkit-transform: rotate(-36deg) translatex(15%) translatey(35%);
transform: rotate(-36deg) translatex(15%) translatey(35%);
}
/* 58.3% { transform: rotate(-38deg) translatex(18%) translatey(45%); } */
66.6% {
-webkit-transform: rotate(-42deg) translatex(5%) translatey(35%);
transform: rotate(-42deg) translatex(5%) translatey(35%);
}
/* 74.9% { transform: rotate(-45deg) translatex(-5%) translatey(22%); } */
83.3% {
-webkit-transform: rotate(-45deg) translatex(-15%) translatey(10%);
transform: rotate(-45deg) translatex(-15%) translatey(10%);
}
/* 91.6% { transform: rotate(-50deg) translatex(-15%) translatey(0%); } */
}
@keyframes head {
0%, 100% {
-webkit-transform: rotate(-45deg) translatex(-5%) translatey(10%);
transform: rotate(-45deg) translatex(-5%) translatey(10%);
}
/* 8.3% { transform: rotate(-45deg) translatex(-5%) translatey(12%); } */
16.6% {
-webkit-transform: rotate(-45deg) translatex(0%) translatey(15%);
transform: rotate(-45deg) translatex(0%) translatey(15%);
}
/* 24.9% { transform: rotate(-43deg) translatex(0%) translatey(20%); } */
33.3% {
-webkit-transform: rotate(-40deg) translatex(5%) translatey(23%);
transform: rotate(-40deg) translatex(5%) translatey(23%);
}
/* 41.6% { transform: rotate(-40deg) translatex(10%) translatey(23%); } */
49.9% {
-webkit-transform: rotate(-36deg) translatex(15%) translatey(35%);
transform: rotate(-36deg) translatex(15%) translatey(35%);
}
/* 58.3% { transform: rotate(-38deg) translatex(18%) translatey(45%); } */
66.6% {
-webkit-transform: rotate(-42deg) translatex(5%) translatey(35%);
transform: rotate(-42deg) translatex(5%) translatey(35%);
}
/* 74.9% { transform: rotate(-45deg) translatex(-5%) translatey(22%); } */
83.3% {
-webkit-transform: rotate(-45deg) translatex(-15%) translatey(10%);
transform: rotate(-45deg) translatex(-15%) translatey(10%);
}
/* 91.6% { transform: rotate(-50deg) translatex(-15%) translatey(0%); } */
}
.animate .head {
-webkit-animation: head var(--speed) linear infinite;
animation: head var(--speed) linear infinite;
}
@-webkit-keyframes ear {
0%, 100% {
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
/* 8.3% { transform: rotate(28deg); } */
16.6% {
-webkit-transform: rotate(28deg);
transform: rotate(28deg);
}
/* 24.9% { transform: rotate(20deg); } */
33.3% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
/* 41.6% { transform: rotate(30deg); } */
49.9% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
/* 58.3% { transform: rotate(30deg); } */
66.6% {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
/* 74.9% { transform: rotate(35deg); } */
83.3% {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
/* 91.6% { transform: rotate(20deg); } */
}
@keyframes ear {
0%, 100% {
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
/* 8.3% { transform: rotate(28deg); } */
16.6% {
-webkit-transform: rotate(28deg);
transform: rotate(28deg);
}
/* 24.9% { transform: rotate(20deg); } */
33.3% {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
/* 41.6% { transform: rotate(30deg); } */
49.9% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
/* 58.3% { transform: rotate(30deg); } */
66.6% {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
/* 74.9% { transform: rotate(35deg); } */
83.3% {
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
/* 91.6% { transform: rotate(20deg); } */
}
.animate .ear {
-webkit-animation: ear var(--speed) linear infinite;
animation: ear var(--speed) linear infinite;
}
@-webkit-keyframes tail {
0%, 100% {
-webkit-transform: rotate(-10deg) translatex(-5%) translatey(38%);
transform: rotate(-10deg) translatex(-5%) translatey(38%);
}
/* 8.3% { transform: rotate(-3deg) translatex(-5%) translatey(38%); } */
16.6% {
-webkit-transform: rotate(-10deg) translatex(-5%) translatey(28%);
transform: rotate(-10deg) translatex(-5%) translatey(28%);
}
/* 24.9% { transform: rotate(20deg) translatex(-5%) translatey(10%); } */
33.3% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
transform: rotate(-10deg) translatex(-10%) translatey(10%);
}
/* 41.6% { transform: rotate(20deg) translatex(-10%) translatey(10%); } */
49.9% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
transform: rotate(-10deg) translatex(-10%) translatey(10%);
}
/* 58.3% { transform: rotate(20deg) translatex(-13%) translatey(14%); } */
66.6% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(18%);
transform: rotate(-10deg) translatex(-10%) translatey(18%);
}
/* 74.9% { transform: rotate(15deg) translatex(-13%) translatey(18%); } */
83.3% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(25%);
transform: rotate(-10deg) translatex(-10%) translatey(25%);
}
/* 91.6% { transform: rotate(0deg) translatex(-5%) translatey(38%); } */
}
@keyframes tail {
0%, 100% {
-webkit-transform: rotate(-10deg) translatex(-5%) translatey(38%);
transform: rotate(-10deg) translatex(-5%) translatey(38%);
}
/* 8.3% { transform: rotate(-3deg) translatex(-5%) translatey(38%); } */
16.6% {
-webkit-transform: rotate(-10deg) translatex(-5%) translatey(28%);
transform: rotate(-10deg) translatex(-5%) translatey(28%);
}
/* 24.9% { transform: rotate(20deg) translatex(-5%) translatey(10%); } */
33.3% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
transform: rotate(-10deg) translatex(-10%) translatey(10%);
}
/* 41.6% { transform: rotate(20deg) translatex(-10%) translatey(10%); } */
49.9% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
transform: rotate(-10deg) translatex(-10%) translatey(10%);
}
/* 58.3% { transform: rotate(20deg) translatex(-13%) translatey(14%); } */
66.6% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(18%);
transform: rotate(-10deg) translatex(-10%) translatey(18%);
}
/* 74.9% { transform: rotate(15deg) translatex(-13%) translatey(18%); } */
83.3% {
-webkit-transform: rotate(-10deg) translatex(-10%) translatey(25%);
transform: rotate(-10deg) translatex(-10%) translatey(25%);
}
/* 91.6% { transform: rotate(0deg) translatex(-5%) translatey(38%); } */
}
.animate .tail {
-webkit-animation: tail var(--speed) linear infinite;
animation: tail var(--speed) linear infinite;
}
@-webkit-keyframes tail-section-1 {
0%, 100% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
/* 8.3% { transform: rotate(15deg); } */
16.6% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
/* 24.9% { transform: rotate(10deg); } */
33.3% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
/* 41.6% { transform: rotate(0deg); } */
49.9% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
/* 58.3% { transform: rotate(0deg); } */
66.6% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 74.9% { transform: rotate(0deg); } */
83.3% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
/* 91.6% { transform: rotate(5deg); } */
}
@keyframes tail-section-1 {
0%, 100% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
/* 8.3% { transform: rotate(15deg); } */
16.6% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
/* 24.9% { transform: rotate(10deg); } */
33.3% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
/* 41.6% { transform: rotate(0deg); } */
49.9% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
/* 58.3% { transform: rotate(0deg); } */
66.6% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 74.9% { transform: rotate(0deg); } */
83.3% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
/* 91.6% { transform: rotate(5deg); } */
}
.animate .tail .section {
-webkit-animation: tail-section-1 var(--speed) linear infinite;
animation: tail-section-1 var(--speed) linear infinite;
}
@-webkit-keyframes tail-section-2 {
0%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 8.3% { transform: rotate(-2deg); } */
16.6% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
/* 24.9% { transform: rotate(-6deg); } */
33.3% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
/* 41.6% { transform: rotate(50deg); } */
49.9% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
/* 58.3% { transform: rotate(20deg); } */
66.6% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
/* 74.9% { transform: rotate(-10deg); } */
83.3% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
/* 91.6% { transform: rotate(-10deg); } */
}
@keyframes tail-section-2 {
0%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 8.3% { transform: rotate(-2deg); } */
16.6% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
/* 24.9% { transform: rotate(-6deg); } */
33.3% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
/* 41.6% { transform: rotate(50deg); } */
49.9% {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
/* 58.3% { transform: rotate(20deg); } */
66.6% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
/* 74.9% { transform: rotate(-10deg); } */
83.3% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
/* 91.6% { transform: rotate(-10deg); } */
}
.animate .tail .section > * > * {
-webkit-animation: tail-section-2 var(--speed) linear infinite;
animation: tail-section-2 var(--speed) linear infinite;
}
@-webkit-keyframes tail-section-3 {
0%, 100% {
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
/* 8.3% { transform: rotate(-20deg); } */
16.6% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* 24.9% { transform: rotate(-30deg); } */
33.3% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* 41.6% { transform: rotate(-70deg); } */
49.9% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
/* 58.3% { transform: rotate(20deg); } */
66.6% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 74.9% { transform: rotate(40deg); } */
83.3% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
/* 91.6% { transform: rotate(20deg); } */
}
@keyframes tail-section-3 {
0%, 100% {
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
/* 8.3% { transform: rotate(-20deg); } */
16.6% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* 24.9% { transform: rotate(-30deg); } */
33.3% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* 41.6% { transform: rotate(-70deg); } */
49.9% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
/* 58.3% { transform: rotate(20deg); } */
66.6% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 74.9% { transform: rotate(40deg); } */
83.3% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
/* 91.6% { transform: rotate(20deg); } */
}
.animate .tail .section > * > * > * > * {
-webkit-animation: tail-section-3 var(--speed) linear infinite;
animation: tail-section-3 var(--speed) linear infinite;
}
✨参考及引用
纯 CSS3 电风扇动画 可调节转速 | HTML5资源教程 (html5tricks.com)
纯CSS3骏马奔腾动画特效 带实现细节分析图 | HTML5资源教程 (html5tricks.com)
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14983679.html
版权所有，如需转载请注明出处。
