如何爲多個CSS轉換設置兩個轉換持續時間

我希望轉換：translateY（）轉換和transform：scale（）轉換的持續時間分別爲1.5秒和0.5秒。在多次嘗試和搜索之後，我似乎無法找到這樣做的方法。任何幫助表示讚賞。謝謝！如何爲多個CSS轉換設置兩個轉換持續時間

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

來源

2016-11-22 Lord Eww Lel

做你試過'過渡時間：1.5秒;'？ – Afsar

由於兩者都使用相同的屬性（'transform'）進行更改，我不相信這是可能的：/也許您可以嵌套兩個元素，翻譯父級並縮放孩子？ – powerbuoy

同意@powerbuoy，您可以使用動畫而不是過渡，並在鼠標懸停時更改元素的類。 – Alexis

您可以在元素的不同屬性上設置不同的轉換。在這裏，你只有一個屬性，你可以嘗試使用動畫而不是轉換。

例

.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>

來源

2016-11-22 10:40:13 Alexis

哎呀，不小心把它給錯了人。這是一個可能的選擇，雖然有時會變得混亂。謝謝。 –

-1

使用CSS 變換：平移Y（160像素）比例（2.2）

看到片斷如下─


 

 
.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>

來源

2016-11-22 10:35:09

如何爲多個CSS轉換設置兩個轉換持續時間

回答

相關問題