1
我用餅形計時器在http://codepen.io/samaxes/pen/KbCHi上設置了一支筆。在迭代的最後一幀停止CSS3動畫 - 計數
但我還沒有想出如何在迭代計數的最後一幀停止動畫(在此特定示例中爲0.9)。
添加以下CSS屬性:
-webkit-animation-fill-mode: forwards;
不會修復它。
我用餅形計時器在http://codepen.io/samaxes/pen/KbCHi上設置了一支筆。在迭代的最後一幀停止CSS3動畫 - 計數
但我還沒有想出如何在迭代計數的最後一幀停止動畫(在此特定示例中爲0.9)。
添加以下CSS屬性:
-webkit-animation-fill-mode: forwards;
不會修復它。
你不可能真的。但是,如果你設置了動畫對象,你希望他們在最後的狀態,這是比較容易得到你要找的效果:
.wrapper {
position: relative;
margin: 40px auto;
background: #d5d5d5;
border-radius: 50%;
}
@mixin timer($item, $duration, $size, $color, $end, $hover: pause) {
#{$item}, #{$item} * { @include box-sizing(border-box); }
#{$item} {
width: $size;
height: $size;
}
#{$item} .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: $color;
}
#{$item} .spinner {
border-radius: 100% 0 0 100%/50% 0 0 50%;
z-index: 200;
transform: rotate(360deg*.9);
animation: rota $duration + s linear $end;
}
#{$item}:hover .spinner,
#{$item}:hover .filler,
#{$item}:hover .mask {
animation-play-state: $hover;
}
#{$item} .filler {
border-radius: 0 100% 100% 0/0 50% 50% 0;
left: 50%;
opacity: 1;
z-index: 100;
animation: opa $duration + s steps(1,end) $end reverse;
}
#{$item} .mask {
border-radius: 100% 0 0 100%/50% 0 0 50%;
width: 50%;
height: 100%;
position: absolute;
background: inherit;
z-index: 300;
opacity: 0;
animation: opa $duration + s steps(1,end) $end;
}
@keyframes rota {
0% { transform: rotate(0deg); }
90% { transform: rotate(360deg*.9); }
}
@keyframes opa {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}
}
@include timer('.wrapper', 5, 250px, #6c6, 0.9);
遺憾的是它不與其他工作值,請嘗試使用.3替換.9值(90%和30%)。 – samaxes 2013-03-27 18:22:02
這裏。使用30%:http://codepen.io/bookcasey/pen/hisHj。如果由於設置方式而不足50%,則不需要'.filler'或'opa'。 – bookcasey 2013-03-27 20:54:35