在 hover 上旋轉項目並在鼠標離開時保留 position

Question

我正在嘗試用 css 做一些 animation 旋轉項目 360deg 並在鼠標離開時保持這種旋轉，即當鼠標離開元素時 animation 不應該運行。 這是我現在擁有的

 .customer-item { width: 150px; height: 80px; border-radius: 5px; margin: 10px; cursor: pointer; background-color: rgb(255, 255, 255); border: 3px solid rgb(240, 240, 240); -webkit-transition: -webkit-transform.8s ease-in-out; transition: transform 2s ease-in-out; }.customer-item:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }

 <div class="row col-md-10 mx-auto justify-content-center"> <div class="customer-item" <img src="./images/customer1logo.png" alt="Customer 1" /> </div> <div class="customer-item" <img src="./images/customer2logo.png" alt="Customer 2" /> </div> <div class="customer-item" <img src="./images/customer3logo.png" alt="Customer 3" /> </div> </div>

但是，我不知道如何在鼠標離開時阻止元素再次旋轉。 關於這個 css 的任何想法。

Answer 1

Apply transition to :hover sudo element not to main class. 這是做什么的？ 這將在 hover 上應用過渡，並且在鼠標移出時，這會將元素帶回原始的 state，而沒有任何 animation。由於將元素旋轉 360 度會使 object 變為實際的 state，因此視覺上看不到鼠標移出。

 .customer-item{ width: 150px; height: 80px; border-radius: 5px; margin: 10px; cursor: pointer; background-color: rgb(255, 255, 255); border: 3px solid rgb(240, 240, 240); -webkit-transition: none; transition: none; }.customer-item:hover{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); transition: transform 2s ease-in-out; }

 <div class="customer-item"> customer-item </div>

Answer 2

使用關鍵幀選擇器來制作動畫。

 .customer-item{ width: 150px; height: 80px; border-radius: 5px; margin: 10px; cursor: pointer; background-color: rgb(255, 255, 255); border: 3px solid rgb(240, 240, 240); }.customer-item:hover{ animation: rotate 1s infinite; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }

 <div class="row col-md-10 mx-auto justify-content-center"> <div class="customer-item" <img src="./images/customer1logo.png" alt="Customer 1" /></div> <div class="customer-item" <img src="./images/customer2logo.png" alt="Customer 2" /></div> <div class="customer-item" <img src="./images/customer3logo.png" alt="Customer 3" /></div> </div>

Answer 3

您可以嘗試使用css-animation對此進行動畫處理：

@keyframes example {
from {transform: rotateY(360deg)}
  to {transform: rotateY(360deg}}
}

    .customer-item {
    animation: example linear forwards
    }