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>

（我去掉前缀凝结答案）