[英]Jerking animation on css3 spinner
我找到了一个有吸引力的微调器(CSS3,SCSS): http : //codepen.io/weaintplastic/pen/qEMZbx 。
@for $i from 1 through 6 {
@keyframes preload-show-#{$i}{
from{
transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-#{$i}{
to{
transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-#{$i}{
$startIndex: $i*5;
$reverseIndex: (80 - $i*5);
#{$startIndex * 1%}{
transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
#{$startIndex + 5%},
#{$reverseIndex * 1%}{
transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
#{$reverseIndex + 5%},
100%{
transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
}
@keyframes preload-flip{
0%{
transform: rotateY(0deg) rotateZ(-60deg);
}
100%{
transform: rotateY(360deg) rotateZ(-60deg);
}
}
body{
background: #efefef;
}
.preloader{
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
display: block;
width: 3.75em;
height: 4.25em;
margin-left: -1.875em;
margin-top: -2.125em;
transform-origin: center center;
transform: rotateY(180deg) rotateZ(-60deg);
.slice{
border-top: 1.125em solid transparent;
border-right: none;
border-bottom: 1em solid transparent;
border-left: 1.875em solid #f7484e;
position: absolute;
top: 0px;
left: 50%;
transform-origin: left bottom;
border-radius: 3px 3px 0 0;
}
@for $i from 1 through 6 {
.slice:nth-child(#{$i}) {
transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
animation: .15s linear .9 - $i*.08s preload-hide-#{$i} both 1;
}
}
&.loading{
animation: 2s preload-flip steps(2) infinite both;
@for $i from 1 through 6 {
.slice:nth-child(#{$i}) {
transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-#{$i} linear infinite both;
}
}
}
}
<div class="preloader loading">
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
</div>
但它在动画中间有一个抽搐的时刻(毛刺):六边形的底部向右移动一个或两个像素。
我拍了这一刻的视频: youtu.be/_TwDuxME8wc 。
我试图自己修理它,但我没有足够的技能。 你能告诉它如何解决吗? 谢谢!
您使用了大量的em
测量值,这会产生大量的小数像素值。 重要的是你只有整数值来避免这些故障。
如果你把@Nick巴雷特的解决方案,更改字体大小.preloader
从20px
到24px
,你将摆脱十进制值。 看到这支笔: http : //codepen.io/pstenstrm/pen/mJJpvP
这当然会使加载器变大,因此您可能希望将em
值更改为px
。
将preload-flip上的100%状态更改为rotateZ(64deg)
@keyframes preload-flip{
0%{
transform: rotateY(0deg) rotateZ(-60deg);
}
100%{
transform: rotateY(360deg) rotateZ(-64deg);
}
}
然而,角度似乎总体上存在更大的问题,因为笔在开始时略微偏斜。
@ pstenstrm的解决方案出色地解决了毛刺问题,+ 1。
但它引入了另一个问题:
在Firefox (仅限?)中, 左上角三角形中有一个丑陋的锯齿状边框 。
要解决这个问题,只需在三角形中添加一个透明轮廓:
.slice{
outline: 1px solid transparent;
}
查看演示以查看最终结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.