title: CSS animation image of leaf (as if blowing in the wind)
body: <p>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.</p>
  
  <p>I am working on a site where the logo contains a leaf image.</p>
  
  <p>I thought it might be eye-catching to have the leaf appearing to be "wind-blown" to its final logo position.</p>
  
  <p>I wanted to improve on the first (very basic) version of the CSS @keyframes animation I had written:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="my-logo"&gt;
  My Logo
  &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>