CSS3 - 悬停时的动画 Scale/Rotate

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

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

Answer 2

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

~~无论如何，这里是第二部分的修复：~~

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

.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

最好的平滑效果不是放大（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>

CSS3 - 悬停时的动画 Scale/Rotate

CSS3 - Animation Scale/Rotate on Hover

css

css-animations