Sakura petals falling with CSS and JS

by Jeremy Caudle

I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

Refresh this page for more petals. :)

Big thanks to Chris Ferdinandi at His posts on applying inline styles with Javascript and generating random numbers with vanilla JS helped me create the effect on today's practice.

View the code:

<div class="codedoodle-block">
<!-- Original petal -->
        <svg x="0px" y="0px" width="0" height="0">
<symbol id="petal" height="98" width="85" >
    <path d="M42.501,11.25c0,0-2.75-14.5-17.75-6.75S2.501,44.25,3.251,53s11.75,22.75,13.75,27

<!-- Flower petal -->
<div class="flower">
    <h1>Refresh this page for more petals. :)</h1>
    <p><strong>Big thanks to Chris Ferdinandi</strong> at <a href=""></a>. His posts on <a href="">applying inline styles with Javascript</a> and <a href="">generating random numbers with vanilla JS</a> helped me create the effect on today's practice.</p>

    <svg class="petal" id="petal1">
        <use xlink:href="#petal" />

    <svg class="petal" id="petal2">
        <use xlink:href="#petal" />

    <svg class="petal" id="petal3">
        <use xlink:href="#petal" />

    <svg class="petal" id="petal4">
        <use xlink:href="#petal" />

    <svg class="petal" id="petal5">
        <use xlink:href="#petal" />

		var petal1pos = document.querySelector('#petal1');
var petal2pos = document.querySelector('#petal2');
var petal3pos = document.querySelector('#petal3');
var petal4pos = document.querySelector('#petal4');
var petal5pos = document.querySelector('#petal5');

var randomNumber = function (min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);

// Logs something like 37
var rand = randomNumber(-30, 210);
var rand2 = randomNumber(-30, 210);
var rand3 = randomNumber(-30, 210);
var rand4 = randomNumber(-30, 210);
var rand5 = randomNumber(-30, 240);

// Set left position to a random number between 85px and 210px = rand + 'px'; = rand2 + 'px'; = rand3 + 'px'; = rand4 + 'px'; = rand5 + 'px';
/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            height: 300px;
            background-color: transparent;
            border-radius: 50%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
            background-repeat: no-repeat;
            background-clip: border-box;

        @keyframes rotate {
            from{transform: translateY(-300%) translateX(-5%) rotate3d(-.5,.1, -.55,0deg);}
            to{transform: translateY(150%) translateX(5%) rotate3d(.25,0,.45,100deg);}

        @keyframes rotatetwo {
            from{transform: translateY(-170%) translateX(-20%) rotate3d(1.25,0,-.25,0deg);}
            to{transform: translateY(150%) translateX(20%) rotate3d(.25,0,.75,100deg);}

        @keyframes rotatethree {
            from{transform: translateY(-240%) translateX(0%) rotate3d(-.25,0,1.25,270deg);}
            to{transform: translateY(150%) translateX(-150%) rotate3d(.25,0,-.25,100deg);}
        @keyframes rotatefour {
            from{transform: translateY(-250%) translateX(0%) rotate3d(.25,0,.75,240deg);}
            to{transform: translateY(150%) translateX(-30%) rotate3d(.25,0,.95,100deg);}
        @keyframes rotatefive {
            from{transform: translateY(-200%) translateX(0%) rotate3d(.25,0,1.25,-70deg);}
            to{transform: translateY(150%) translateX(30%) rotate3d(.25,0,.32,100deg);}
        @keyframes longfade {
            from{opacity: 1;}
            to{opacity: 0;}

        .flower {
            height: 100%;
            width: 100%;
            background-color: rgba(253, 56, 89, 0.0125);
            position: relative;

        .petal {
            display: block;
            position: absolute;
            max-width: 85px;
            max-height: 98px;
            top: 44px;
            left: 107.5px;
            -webkit-transform-origin: center 110%;
            transform-origin: center 110%;
            fill:rgba(255, 192, 202, 0.9);
            animation: rotate 8s ease-out 0s 1 normal forwards, longfade 13s ease-out 0s 1 normal forwards;
            transition: all 1s ease-out;
        .petal:hover, .petal:focus, .petal:active {
            fill:rgba(255, 92, 119, 0.9);
            stroke: rgba(255, 92, 110, 1);

        .petal:nth-of-type(1) {
            animation-name: rotate, longfade;

        .petal:nth-of-type(2) {
            animation-name: rotatetwo, longfade;
        .petal:nth-of-type(3) {
            animation-name: rotatethree, longfade;

        .petal:nth-of-type(4) {
                    animation-name: rotatefour, longfade;

        .petal:nth-of-type(5) {
                    animation-name: rotatefive, longfade;

        .codedoodle-block p {
            margin: 1rem auto;
            max-width: 40em;
            font-size: 16px;
            line-height: 1.4;
            color: #999;