CSS动画和CSS过渡可以组合在同一个属性上吗？

Question

案例研究：一组<div>元素，其中:hover选择器可以启用摆动动画。但摆动本身只是打开和关闭。我想过渡到动画。

这个片段仍然不和谐。动画以-10度的方式启动方框，因为这是从左到右和后退再次平滑摆动的最轻量级方式。

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>

即使对于更快的动画，我也希望能够根据用户交互来减弱非线性动作。纯CSS不可能吗？我没有成功找到其他人谈论这类事情。

还有两个例子......而不是像这样的行为：

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>

我想将此动作转换为这样（没有那么多代码）

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>