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度，这是一条线的角度这是代码

- update-- 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 2

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

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

我找到了一个黑客。这将在旋转期间消除模糊，但在放大期间不会消除模糊。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

获得平滑结果的最佳方法是不进行放大（缩放= 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>

CSS3 - 动画比例/悬停时旋转

3 个答案: