时间戳

首页 > 解决方案 > transform 属性的 CSS 过渡，但具有不同的模式

css - transform 属性的 CSS 过渡，但具有不同的模式

问题描述

我有一个按钮，当它悬停在它上面时，它具有缩放和旋转效果。我想实现这些效果，但持续时间不同。基本上，我想实现这样的目标

.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 个不同的属性 ( heightand opacity)，而我的解决方案是在单个属性 ( transform) 上，但transform有 2 种模式，rotateand scale，需要以不同的时间进行动画处理。我需要transform:rotatewith.5s和transform:scalewith.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;
}

这种方法首先自动播放动画，其次，更重要的是，第二个动画覆盖了第一个动画，我只剩下缩放而没有旋转。但是，如果有人可以使此代码正常工作，那么无论哪种方式都很棒！

标签： css

解决方案

如评论中所述，这可以通过包装容器来实现。这不是您所说的使用单个容器的期望行为，但不幸的是，截至 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>

推荐阅读