CSS animation image of leaf (as if blowing in the wind)

Question

This was a personal challenge and I'm reasonably happy with the approach I have come up with below but I'd be keen to see if there are any alternative approaches.

I am working on a site where the logo contains a leaf image.

I thought it might be eye-catching to have the leaf appearing to be "wind-blown" to its final logo position.

I wanted to improve on the first (very basic) version of the CSS @keyframes animation I had written:

@keyframes leafanimation {
     0% {transform:translate(900px,500px); color:rgba(255,0,0,0);}
    80% {transform:translate(0,0); color:rgba(255,0,0,0);}
   100% {transform:translate(0,0); color:rgba(255,0,0,1);}
}

.my-logo {
position:absolute; 
top:0;
left:0;
height: 40px;
line-height: 40px;
font-size: 36px;
color: rgb(255,0,0);
animation: leafanimation 6s linear;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
background-color: rgb(255,0,0);
border-radius: 20px;
}

<div class="my-logo">
My Logo
<div></div>
</div>

Answer 1

This was the solution I came up with (eventually) using a series of translate and rotate CSS transforms:

@keyframes leafanimation {
         0% {transform:translate(900px,500px) rotate(0deg); color:rgba(255,0,0,0);}
        20% {transform:translate(850px,450px) rotate(360deg); color:rgba(255,0,0,0);}
        40% {transform:translate(450px,200px) rotate(720deg); color:rgba(255,0,0,0);}
        60% {transform:translate(100px,100px) rotate(1080deg); color:rgba(255,0,0,0);}
        80% {transform:translate(0,0) rotate(1440deg); color:rgba(255,0,0,0);}
       100% {transform:translate(0,0) rotate(1440deg); color:rgba(255,0,0,1);}
}

.my-logo {
position:absolute; 
top:0;
left:0;
height: 40px;
line-height: 40px;
font-size: 36px;
color: rgb(255,0,0);
animation: leafanimation 6s linear;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
background-color: rgb(255,0,0);
border-radius: 20px;
}

<div class="my-logo">
My Logo
<div></div>
</div>