title: CSS floating balloon animation
body: <p>I am trying to animate a balloon floating across the screen. I thought I would use a linear movement animation on the Y-Axis and a sine-like pendulum movement on the X-Axis to simulate the balloon floating back and forth a little horizontally. I'm not really happy with the result, it looks off. Do you have any suggestions how I can improve the animation?</p>
  
  <p>This is the CSS animation that I came up with:</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>.balloon {
    background-image: url(https://i.imgur.com/QJZPw2X.png);
    width: 180px;
    height: 300px;
    background-size: contain;
    position: absolute;
    bottom: 0%;
    animation: move_y 30s linear forwards, oscil1 6s infinite;
    left: 45%;
  }
  
  @keyframes move_y {
    from {
      bottom: -10%;
    }
    to {
      bottom: 100%;
    }
  }
  
  @keyframes oscil1 {
    from {
      translate: 0 0;
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
    }
    25% {
      translate: 10px 0;
      transform: rotate(3deg);
      animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);
    }
    50% {
      translate: 0 0;
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
    }
    75% {
      translate: -10px 0;
      transform: rotate(-3deg);
      animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);
    }
    to {
      translate: 0 0;
      transform: rotate(0deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="balloon"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>