css - 在 :hover and @keyframes for same div 中使用转换属性

Question

div{
    width:100px;
    height: 100px;
    background-color: red;
    animation: anim 1s forwards;
    opacity: 0;
}
@keyframes anim{
    0%{transform: scale(1.2);opacity:0;}
    100%{transform: scale(1);opacity:1;}
}
div:hover{
    transform: scale(1.05);
}

<div></div>

我在处理某些代码和转换属性时遇到问题。

我在 div 上有一个入口动画。但是我的悬停动画不起作用，所以看起来它不起作用，因为我已经在动画中使用了“变换”。

有没有办法让它发挥作用？

Answer 1

您可以通过将transition 添加到div 的transform 来为transform 设置动画

/* property name | duration | timing function */
transition: transform 1s ease-in;

在你的情况下

@keyframes anim{
  0%{transform: scale(1.2);opacity:0;}
  100%{transform: scale(1);opacity:1;}
}
div:hover{
    transform: scale(1.05);
}
div{
    width:100px;
    height: 100px;
    background-color: red;
    animation: anim 1s;
    transition: transform 1s;
}

<div>Hello</div>

DEMO

Transition - MDN - DOC