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

Question

I tried and wrote this code but it have a problem, first issue is text inside div will be fuzzy (fluffy)! and second scale animation not play softly, all i want is play animation softly, scale once then rotate infinite on hover.

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

Here is JSFiddle Demo

Answer 1

here is the example and the point is first to describe all features in the main div as defaults because animation uses main elements rules to calculate time etc. and second point here you used 90 degrees to turn but a complete turning back can be done by 180 degrees which is the angle of a line here is the code

--update-- here is the exxample you can see scale animates the problem was in your animation scaling started from 2 and ended by 2 so there was no animation for that --update-- here we go if you run transition first and by the time while transition is running make animation wait by delay time of animation it works fine you can see 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

We cannot, as of yet, completely make the font clear. This is because you are using an animation. If there was no spinning, the text would not be fuzzy. However, we can try using several font smoothing properties to try and combat this. None of them are very good but they do improve legibility slightly.

Regardless, here is the fix for the second part:

I found a hack. This will remove the blur during the rotation but not during the scaling up.

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

(I removed the prefixes to condense the answer)

Answer 3

The best way to have a smooth result is not to have a zoom in (scale=2) but a zoom out (scale=0.5), but of course in the opposite state.

And I don't believe that what you want can be achieved with a single animation. I have used 2 elements, and one handles the rotation and the other the scale

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