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

Question

我希望转换：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);
}

Answer 1

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

示例

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

<div class="mydiv"></div>

Answer 2

  

使用CSS transform：translateY（160px）scale（2.2）

请参阅下面的代码段

＆＃13;

＆＃13;

   

 .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);
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;