CSS3 - 動畫縮放/旋轉懸停

Question

我試過並編寫了這段代碼，但它有一個問題，第一個問題是div內的文本會模糊（蓬鬆）！而第二個比例尺動畫不是輕輕彈奏，我要的只是輕輕彈動動畫，縮放一次然後旋轉無限旋轉。

@-webkit-keyframes socialspin { 
    from { 
    -webkit-transform: scale(2) rotate(0deg); 
    -moz-transform: scale(2)rotate(0deg); 
    -ms-transform: scale(2) rotate(0deg); 
    -o-transform: scale(2) rotate(0deg); 
    transform: scale(2) rotate(0deg); 
    } 

    to { 
    -webkit-transform: scale(2) rotateY(90deg); 
    -moz-transform: scale(2) rotateY(90deg); 
    -ms-transform: scale(2) rotateY(90deg); 
    -o-transform: scale(2) rotateY(90deg); 
    transform: scale(2) rotateY(90deg); 
    } 
} 

這裏是JSFiddle演示

Answer 1

具有平滑的結果，最好的辦法就是不要在（規模= 2），但變焦的變焦（規模= 0.5），但當然是處於相反的狀態。

而且我不相信用一個動畫就能達到你想要的效果。我用2種元素，和一個把手的旋轉和其他規模

#container { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 
#container:hover { 
 
    -webkit-animation: socialspin 5s linear 0s infinite alternate; 
 
} 
 

 

 
@-webkit-keyframes socialspin { 
 
    from { -webkit-transform: rotate(0deg); } 
 
    to { -webkit-transform: rotateY(90deg); } 
 
} 
 
@keyframes socialspin { 
 
    from { transform: rotate(0deg); } 
 
    to { transform: rotateY(90deg); } 
 
} 
 

 
#base { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: yellow; 
 
    transform: scale(0.5); 
 
    transition: transform 5s; 
 
    transform-origin: top left; 
 
    font-size: 200%; 
 
} 
 

 
#container:hover #base { 
 
    transform: scale(1); 
 
    
 
}

<div id="container"> 
 
<div id="base"> 
 
    
 
<br> 
 
<br> 
 
<br>  
 
HELLLLOOOO!!! 
 
</div> 
 
    </div>

Answer 2

here是示例，並且點是第一個描述在主DIV作爲默認值的所有特徵，因爲動畫使用主元素的規則來計算時間等 和第二在這裏指向您使用90度轉彎，但完成轉向可以通過180度完成，這是一條線的角度 這裏是代碼

- 更新 - here是一個例子，你可以看到規模動畫的問題是在你的動畫縮放從2開始，並以2結尾，所以沒有動畫 --update-- 這裏我們去，如果你首先運行轉換，過渡運行通過動畫的延遲時間，使動畫等待它工作正常，你可以看到here

div { 
    width: 200px; 
    height: 200px; 
    background: yellow; 
    -webkit-transform:scale(1) rotate(0); 
      transform:scale(1) rotate(0); 
    margin-left:200px; 
    margin-top:50px; 
    transition:-webkit-transform .5s linear; 
    transition:transform .5s linear; 
} 

div:hover { 
    -webkit-transform:scale(2) rotate(0); 
      transform:scale(2) rotate(0); 
    -webkit-animation: socialspin 5s linear .5s infinite alternate; 
    -moz-animation: socialspin 5s linear .5s infinite alternate; 
} 


@-webkit-keyframes socialspin { 
    from { 
    -webkit-transform: scale(2) rotate(0deg); 
    transform:scale(2) rotate(0deg); 
    } 

    to { 
    -webkit-transform: scale(2) rotateY(180deg); 
    transform: scale(2) rotateY(180deg); 
    } 
} 

Answer 3

我們不能，作爲尚未完全使字體清晰。這是因爲您正在使用動畫。如果沒有旋轉，文字就不會模糊。但是，我們可以嘗試使用幾種字體平滑屬性來嘗試和解決此問題。它們都不是很好，但它們確實略微提高了易讀性。

無論如何，這裏是第二部分的修復：

我發現一個黑客。這將消除旋轉過程中的模糊，但不會在放大過程中消除模糊。

.square { 
 
    width:100px; 
 
    height: 100px; 
 
    background-color:black; 
 
    margin: 50px; 
 
} 
 
p { 
 
    -webkit-font-smoothing: antialiased; 
 
    color:white; 
 
    text-align: center; 
 
    padding-top: 35px; 
 
} 
 
.square:hover { 
 
    -webkit-animation: scale 1s linear 0s 1, spin 1s linear 1s infinite alternate; 
 
} 
 
.square:hover p{ 
 
-webkit-animation: scaletext 1s linear 0s 1; 
 
} 
 
@-webkit-keyframes scale { 
 
    from {transform: scale(1); } 
 
    to{transform: scale(2);} 
 
} 
 
@-webkit-keyframes scaletext { 
 
    from {transform: scale(1); } 
 
    to{transform: scale(1);} 
 
} 
 
@-webkit-keyframes spin { 
 
    from {transform: rotateY(0deg) scale(2) ;} 
 
    to {transform: rotateY(90deg) scale(2);} 
 
}

<div class="square"> 
 
    <p>Some text</p>       
 
</div>

（我去掉前綴凝結答案）