Can CSS animations and CSS transitions be combined on the same property?

Question

Case study: A set of <div> elements, with a :hover 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.

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.

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); }
}

<div></div>
<div></div>

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.

Two more examples... instead of behavior like this:

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); }
}

<div></div>
<div></div>

I'd like to transition the movement to look like this (without so much 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); }
}

<div></div>
<div></div>