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

获得平滑结果的最佳方法不是放大 (scale=2)，而是缩小 (scale=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

到目前为止，我们还不能完全清除字体。这是因为您正在使用动画。如果没有旋转，文字就不会模糊。但是，我们可以尝试使用几个字体平滑属性来尝试解决这个问题。它们都不是很好，但它们确实略微提高了易读性。

不管怎样，这里是第二部分的修复：

我发现了一个黑客。这将在旋转过程中消除模糊，但在放大过程中不会。

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

（我删除了前缀以浓缩答案）

Answer 3

here 是示例，重点是首先将主 div 中的所有功能描述为默认值，因为动画使用主元素规则来计算时间等。 第二点在这里您使用了 90 度转弯，但是可以通过 180 度完成完全的转弯，这是一条线的角度 这是代码

--更新-- here 是您可以看到缩放动画的示例，问题在于您的动画缩放从 2 开始并以 2 结束，因此没有动画 - 更新 - 如果你先运行过渡，然后在过渡运行时让动画等待动画的延迟时间，它工作正常，你可以看到 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);
  }
}