Can CSS animations and CSS transitions be combined on the same property?
<p>Case study: A set of <code>&lt;div&gt;</code> elements, with a <code>:hover</code> selector that enables a wobbling animation. But the wobble itself is jarring to just switch on and off. I want to transition into the animation.</p>

<p>This snippet is still jarring. The animation starts the boxes at -10 degrees because that's the most lightweight way to get a smooth wobble from left to right and back again.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body, div{
  margin:10px;
}

div{
  width:50px;
  height:50px;
  background-color:tan;
  transition: transform 3s;
}

div:hover{
  background-color:red;
  animation: wobble 30s infinite;
}

@keyframes wobble{
  0%,100%{ transform:rotate(-12deg); }
  50%{ transform:rotate(12deg); }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Even for faster animations I would like to be able to attenuate the non-linear action based on user interaction. Is it not possible with pure CSS? I was unsuccessful in finding other people talking about this sort of thing.</p>

<p>Two more examples... instead of behavior like this:</p>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body, div{
  margin:10px;
}

div{
  width:50px;
  height:50px;
  background-color:tan;
  transition: transform 3s;
}

div:hover{
  background-color:red;
  animation: wobble 0.2s infinite;
}

@keyframes wobble{
  0%,100%{ transform:rotate(-12deg); }
  50%{ transform:rotate(12deg); }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I'd like to transition the movement to look like this (without so much code)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body, div{
  margin:10px;
}

div{
  width:50px;
  height:50px;
  background-color:tan;
  transition: transform 2s;
}

div:hover{
  background-color:red;
  animation-name: wobble-up, wobble;
  animation-duration: 1.2s, 0.2s;
  animation-delay: 0s, 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1, infinite;
}

@keyframes wobble-up{
  000.0%{ transform:rotate( 0deg); }
  008.3%{ transform:rotate( 1deg); }
  016.7%{ transform:rotate(-2deg); }
  025.0%{ transform:rotate( 3deg); }
  033.3%{ transform:rotate(-4deg); }
  041.6%{ transform:rotate( 5deg); }
  050.0%{ transform:rotate(-6deg); }
  058.3%{ transform:rotate( 7deg); }
  066.7%{ transform:rotate(-8deg); }
  075.0%{ transform:rotate( 9deg); }
  083.3%{ transform:rotate(-10deg); }
  091.7%{ transform:rotate( 11deg); }
  100.0%{ transform:rotate(-12deg); }
}

@keyframes wobble{
  0%,100%{ transform:rotate(-12deg); }
  50%{ transform:rotate(12deg); }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>