/* https://codepen.io/qqz/pen/GzyQVb */

body {
    overflow-x:hidden;
}
.petal {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    position: absolute;
    top: -10rem;
    bottom:0;
    z-index: 150;
}
.petal .rotate {
    animation: driftyRotate 1s infinite both ease-in-out;
    perspective: 1000;
}
.petal .askew {
    background: currentColor;
    transform: skewY(10deg);
    display: block;
    width: 2rem;
    height: 2rem;
    animation: drifty 1s infinite alternate both ease-in-out;
    perspective:1000;
}

.petal {
    color: rgba(0,0,0,0);
}
.petal:nth-of-type(7n) .askew {
    animation-delay: -.6s;
    animation-duration: 2.25s;
}
.petal:nth-of-type(7n + 1) .askew {
    animation-delay: -.879s;
    animation-duration: 3.5s;
}
.petal:nth-of-type(7n + 2) .askew {
    animation-delay: -.11s;
    animation-duration: 1.95s;
}
.petal:nth-of-type(7n + 3) .askew {
    animation-delay: -.246s;
    animation-duration: .85s;
}
.petal:nth-of-type(7n + 4) .askew {
    animation-delay: -.43s;
    animation-duration: 2.5s;
}
.petal:nth-of-type(7n + 5) .askew {
    animation-delay: -.56s;
    animation-duration: 1.75s;
}
.petal:nth-of-type(7n + 6) .askew {
    animation-delay: -.76s;
    animation-duration: 1.5s;
}

.petal:nth-of-type(9n) .rotate {
    animation-duration: 2s;
}
.petal:nth-of-type(9n + 1) .rotate {
    animation-duration: 2.3s;
}
.petal:nth-of-type(9n + 2) .rotate {
    animation-duration: 1.1s;
}
.petal:nth-of-type(9n + 3) .rotate {
    animation-duration: .75s;
}
.petal:nth-of-type(9n + 4) .rotate {
    animation-duration: 4.3s;
}
.petal:nth-of-type(9n + 5) .rotate {
    animation-duration: 3.05s;
}
.petal:nth-of-type(9n + 6) .rotate {
    animation-duration: 2.76s;
}
.petal:nth-of-type(9n + 7) .rotate {
    animation-duration: 7.6s;
}
.petal:nth-of-type(9n + 8) .rotate {
    animation-duration: 1.78s;
}

@keyframes drifty {
    0% {
        transform: skewY(10deg) translate3d(-250%, 0, 0);
        display:block;
    }
    100% {
        transform: skewY(-12deg) translate3d(250%, 0, 0);
        display:block;
    }
}
@keyframes driftyRotate {
    0% {
        transform: rotateX(0);
        display:block;
    }
    100% {
        transform: rotateX(359deg);
        display:block;
    }
}