Движущийся цветок на CSS

Красивый движущийся  в разные стороны цветок, выполнен при помощи CSS и HTML. Отлично подойдёт для оформления детского сайта или блога о природе, а возможно и для любого другого сайта.

HTML

<div class="wrapper">
    <div class="plant">
        <div class="flower">
            <div class="head">
                <div class="face"></div>
            </div>
        </div>
        <div class="leaf__one"></div>
        <div class="leaf__two"></div>
        <div class="leaf__three"></div>
    </div>
    <div class="pot">
        <div class="top"></div>
    </div>
</div>

CSS

.wrapper {
    height: 340px;
    width: 300px;
    position: relative;
    margin: 20px auto;
    z-index: 2;
    filter: drop-shadow(0 0 6px #aaa);
}
.wrapper .plant {
    height: 150px;
    width: 6px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    margin: auto;
    background: #30862D;
    z-index: 1;
    transform-origin: center bottom;
    animation: lean 3s .5s infinite;
}
.wrapper .plant .leaf__one {
    height: 30px;
    width: 30px;
    background: #30862D;
    position: relative;
    top: 10px;
    left: 6px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 100%;
    transform: rotateZ(-67.5deg);
    z-index: -2;
}
.wrapper .plant .leaf__two {
    height: 26px;
    width: 26px;
    background: #30862D;
    position: relative;
    top: 12px;
    right: 26px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    transform: rotateZ(67.5deg);
}
.wrapper .plant .leaf__three {
    height: 24px;
    width: 24px;
    background: #30862D;
    position: relative;
    top: 22px;
    left: 6px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 100%;
    transform: rotateZ(-67.5deg);
}
.wrapper .plant .flower {
    height: 80px;
    width: 80px;
    position: absolute;
    top: -80px;
    left: -40px;
    animation: rotate 3s .5s infinite;
}
.wrapper .plant .flower::before {
    content: "";
    height: 40px;
    width: 40px;
    position: absolute;
    top: -30px;
    left: 20px;
    background: #C2000A;
    border-radius: 100%;
    z-index: -1;
    box-shadow: -37px 15px #C2000A, -47px 54px #C2000A, -26px 89px #C2000A, 15px 93px #C2000A, 43px 63px #C2000A, 36px 21px #C2000A;
}
.wrapper .plant .flower .head {
    height: 80px;
    width: 80px;
    position: absolute;
    border-radius: 100%;
    background: #E8AD17;
    box-shadow: 0 0 3px #333;
    z-index: 10;
}
.wrapper .plant .flower .head .face {
    height: 26.6666666667px;
    width: 26.6666666667px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
    border: 4px transparent solid;
    border-bottom: 4px black solid;
    border-right: 4px black solid;
    border-radius: 100%;
    transform: rotate(45deg);
    z-index: 10;
    box-sizing: content-box; 
}
.wrapper .plant .flower .head .face::before, 
.wrapper .plant .flower .head .face::after {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    top: -10px;
    background: black;
    border-radius: 100%;
}
.wrapper .plant .flower .head .face::before {
    top: 8px;
    left: -16px;
}
.wrapper .plant .flower .head .face::after {
    top: -16px;
    right: 8px;
}
.wrapper .pot {
    height: 80px;
    width: 60px;
    background: #4D2319;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;;
    margin: auto;
}
.wrapper .pot .top {
    height: 20px;
    width: 120px;
    position: absolute;
    left: -30px;
    background: #431f16;
    z-index: 2;
}
.wrapper .pot .top::after {
    content: "";
    height: 14px;
    width: 120px;
    position: absolute;
    top: -8px;
    left: 0;
    border: 0;
    border-top: 14px #220F0B solid;
    border-radius: 100%;
}
.wrapper .pot::before, 
.wrapper .pot::after {
    content: "";
    position: absolute;
    border-color: #4D2319;
    border-top-width: 40px;
    border-right-width: 15px;
    border-bottom-width: 40px;
    border-left-width: 15px;
    border-style: solid;
    border-bottom-color: transparent;
}
.wrapper .pot::before {
    left: -30px;
    border-left-color: transparent;
}
.wrapper .pot::after {
    right: -30px;
    border-right-color: transparent;
}
@keyframes lean {
    0% {
        transform: rotate(0deg);
    }
    12.5% {
        transform: rotate(-22.5deg);
    }
    25% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    62.5% {
        transform: rotate(22.5deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    12.5% {
        transform: rotate(22.5deg);
    }
    25% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    62.5% {
        transform: rotate(-22.5deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}