一直在尝试使用 :hover 在使用CSS的运行中的动画中，在下面的例子中，仅有 background-color 变化 :hover 而 transform 属性只有在动画停止后才会被触发。如何触发 transform: rotate 在动画中？
另外，我最初的 background-color: red 当我重新加载页面时，如果我没有明确地用 :hover. 我想这是由于 transition-duration，是否可以只使用CSS来避免这种情况？
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.red {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-direction: alternate;
transition-duration: 5s;
transition-property: all;
}
.red:hover {
transform: rotate(180deg);
background-color: teal;
}
@keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}<body>
<div class="container">
<div class="red"></div>
</div>
</body>变换不会以这种方式堆叠。绕过这个限制的一个方法是为旋转变换使用一个父元素。
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.red {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
animation-delay: 0;
animation-timing-function: ease-in-out;
animation-direction: alternate;
transition-duration: 5s;
transition-property: all;
}
.red:hover {
background-color: teal;
}
.wrap {
transition: all 5s;
}
.wrap:hover {
transform: rotate(180deg);
}
@keyframes animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}<body>
<div class="container">
<div class="wrap">
<div class="red"></div>
</div>
</div>
</body>