代码之家 › 专栏 › 技术社区 › steexd

使用相同div的hover和@keyframes中的transform属性

html5 css html

steexd · 技术社区 · 8 年前

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上有一个入口动画。但是我的悬停动画不起作用,所以看起来好像不起作用,因为我已经在动画中使用了“变换”。

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

1 回复 | 直到 8 年前

It worked yesterday. 8 年前

您可以设置动画 transform 加入 transition 到 div s变换

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