我有一个按钮,当它悬停在上面时,它有一个缩放和旋转效果。我想达到这些效果,但持续时间不同。
基本上,我想实现这样的目标
.button {
transition: transform 0.1s;/* scale should be .1s and rotate should be .5s*/
}
.button:hover {
box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
transform: scale(1.111, 1.111) rotate(360deg);
}
这样做的任何捷径?这甚至可能吗?概念示例
.button{
transition[scale]: .1s;
transition[rotate]: .5s
}
编辑:实际上,已经存在的解决方案用于 2 个不同的属性( height
和 opacity
),而我的是一个属性( transform
),但是 transform
有 2 种模式,rotate
和 scale
,需要以不同的时间进行动画处理。我需要
transform:rotate
与 .5s
和 transform:scale
与 .1s
编辑2:有人提到了动画的使用,所以这就是我所做的@keyframes anim1 {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(180deg);
}
}
@keyframes anim2 {
0%{
transform: scale(1,1);
}
50%{
transform: scale(1.111,1.111);
}
100%{
transform: scale(1,1);
}
}
.button{
animation: anim1 3s ease-in-out, anim2 5s ease-in-out;
}
这个方法首先自动播放动画,其次更重要的是,第二个动画覆盖了第一个动画,我只剩下缩放而不是旋转。但是,如果有人可以使此代码正常工作,无论哪种方式都很棒!
最佳答案
正如评论中所指出的,这可以通过包装容器来实现。这不是您所说的使用单个容器的理想行为,但不幸的是,截至 2020 年 12 月,该语法不受支持。下面是一个粗略的 POC,显示了这一点:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.animate-scale {
transition: transform 0.1s;
}
.animate-scale:hover {
transform: scale(1.111, 1.111);
}
.animate-rotate {
transition: transform 0.5s;
}
.animate-rotate:hover {
transform: rotate(360deg);
}
.button {
box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
}
<div class="wrapper">
<div class="animate-scale">
<div class="animate-rotate">
<span class="button">
Hover me!
</span>
</div>
</div>
</div>
关于transform 属性的 CSS 转换,但具有不同的模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65466527/