如何为多个 CSS 转换设置两个转换持续时间答案

【问题标题】：How to Set Two Transition Durations for Multiple CSS Transforms如何为多个 CSS 转换设置两个转换持续时间
【发布时间】：2016-11-22 10:13:51
【问题描述】：

我希望 transform: translateY() 过渡和 transform: scale() 过渡的持续时间分别为 1.5 秒和 0.5 秒。经过多次尝试和搜索，我似乎无法找到一种方法。任何帮助表示赞赏。谢谢！

//..CSS..//

.circle1 {
        z-index: 1056;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #BBBBBB;
        position: fixed;
        top: 150px; 
        margin: 0 auto;
        left: 0;
        right: 0;
        color: white;
        text-align: center;
        font-family: Raleway-Light;
        text-decoration: none;
        list-style-type: none;
        box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
       -webkit-transition:  1.5s ease-in-out;
        transition: 1.5s ease-in-out;
        transform: translateY(2000px);
        cursor: pointer;
}

.circle1.open {
        transform: translateY(0px);
}

.circle1:hover {
        transform: scale(1.2);
}

【问题讨论】：

你试过transition-duration: 1.5s;吗？
由于两者都使用相同的属性进行更改 (transform) 我不相信这是可能的：/ 也许您可以嵌套两个元素，翻译父元素并缩放子元素？
同意@powerbuoy，您可以使用动画代替过渡，并在鼠标悬停时更改元素的类。
啊，我明白了。我会这样做，看看情况如何。谢谢。
检查下面我发布的sn-p。我认为它对你有帮助。

标签： css css-transitions css-animations css-transforms

【解决方案1】：

您可以在元素的不同属性上设置不同的过渡。在这里，你只有一个属性，你可以尝试使用animation而不是transition。

示例

.mydiv{
  background-color:#ddd;
  width:80px;
  height:80px;
  transform:scale(1);
 }

.mydiv:hover{
  animation:transformanim 1.5s ease-out forwards;
}

@keyframes transformanim{
  0%{
    transform:scale(1) translateX(0px);
  }
   33%{
     transform:scale(1.33) translateX(20px); /*0.5s*/
  }
  100%{
    transform:scale(2) translateX(20px);; /*1.5s here*/
  }
}

&lt;div class="mydiv"&gt;&lt;/div&gt;

【讨论】：

糟糕，不小心把它给了错误的人。这是一种可能的选择，尽管有时会变得混乱。谢谢。

【解决方案2】：

使用 CSS transform:translateY(160px) scale(2.2)

见下面的 sn-p-

   

 .circle1 {
            z-index: 1056;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #BBBBBB;
            position: fixed;
            top:50px; 
            margin: 0 auto;
            left: 0;
            right: 0;
            color: white;
            text-align: center;
            font-family: Raleway-Light;
            text-decoration: none;
            list-style-type: none;
            box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
           -webkit-transition:  1.5s ease-in-out;
            transition: 1.5s ease-in-out;
            transform: translateY(50px);
            cursor: pointer;
    }


    .circle1:hover {
             transform:translateY(160px) scale(2.2);
    }

<div class="circle1">
</div>

【讨论】：