CSS3 - 动画缩放/旋转悬停
我试过并编写了这段代码,但它有一个问题,第一个问题是div内的文本会模糊(蓬松)!而第二个比例尺动画不是轻轻弹奏,我要的只是轻轻弹动动画,缩放一次然后旋转无限旋转。CSS3 - 动画缩放/旋转悬停
@-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演示
具有平滑的结果,最好的办法就是不要在(规模= 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>
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);
}
}
没有我的朋友,我想缩放(2)悬停!不是默认的。在你的小提琴仍然有问题。大规模工作不顺利,文字仍然模糊。 – ITSolution
关于模糊文本我不认为你可以做一些尝试通过缩短时间来缩短动画速度,这个问题可能会稍微隐形 – nikoss
检查更新@ITSolution – nikoss
我们不能,作为尚未完全使字体清晰。这是因为您正在使用动画。如果没有旋转,文字就不会模糊。但是,我们可以尝试使用几种字体平滑属性来尝试和解决此问题。它们都不是很好,但它们确实略微提高了易读性。
无论如何,这里是第二部分的修复:
我发现一个黑客。这将消除旋转过程中的模糊,但不会在放大过程中消除模糊。
.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>
(我去掉前缀凝结答案)
大型工程有点模糊呀 – jackjop
不应刻度值是的'from'部分1动画? –
这个问题我很困惑。文字模糊是因为您使用的是动画,这是为了使转换看起来更平滑。你关于什么规模的动画?在你的问题中只有一个,它是不变的:不会有过渡。 – jaunt