在迭代计数的最后一帧停止CSS3动画 [英] Stop a CSS3 Animation at the last frame of the iteration-count

问题描述

我设置在 HTTP笔：//$c$cpen.io/samaxes /笔/ KbCHi 的一个馅饼计时器。

I've setup a pen at http://codepen.io/samaxes/pen/KbCHi with a pie timer.

不过，我还没有想通了，我如何在迭代数（0.9在这个特殊的例子）的最后一帧停止动画。

However I haven't figured out how I to stop the animation at the last frame of the iteration-count (0.9 in this particular example).

添加以下CSS属性：

-webkit-animation-fill-mode: forwards;

不会解决它。

推荐答案

您真的不能。但是，如果您设置动画对象，你希望他们在最后的状态，这是比较容易得到你要找的效果：

You can't really. However, if you set the animated objects to the state you want them to end up in, it's relatively easy to get the effect you're looking for:

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

演示

这篇关于在迭代计数的最后一帧停止CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！