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

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

/* 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

将：hover和@keyframes中的transform属性用于相同的div

1 个答案: