css - 为什么 CSS 动画没有持续时间？

Question

我有一些动画应该从一种状态转到另一种状态。从状态 empty 到状态 bit 工作正常，从 bit 到 large 也是如此，但是当我尝试使用我作为类添加的反向动画，动画没有持续时间。这是我的代码片段:

@keyframes empty-bit {
  0%   {width: 0%;}
  100% {width: 4px;}
}
@keyframes bit-large {
  0%   {width: 4px;}
  100% {width: 100%;}
}
.timeline-empty-bit {
  animation-name: empty-bit;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
  animation-delay: 200ms;
}
.timeline-bit-large {
  animation-name: bit-large;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
}
.timeline-large-bit {
  animation-name: bit-large;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
  animation-delay: 200ms;
}
.timeline-bit-empty {
  animation-name: empty-bit;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
}

这是一个 jsfiddle:https://jsfiddle.net/9tmm46fz/使用箭头(左、右)查看动画。

Answer 1

动画确实有持续时间。问题是动画已经播放完毕，更改类不会从头开始播放动画，除非 animation-name 属性发生变化。因此，解决此问题的一种方法是为 bit-empty 和 large-bit 类创建单独的动画:

.timeline-gauge {
    height: 20px;
}
.timeline-gauge-container {
    display: inline-block;
    height: 100%;
}
.timeline-gauge-part {
    display: block;
    height: 100%;
    width: 0%;
}
@keyframes empty-bit {
    0%   {width: 0%;}
    100% {width: 4px;}
}
@keyframes bit-empty {
    0%   {width: 0%;}
    100% {width: 4px;}
}
@keyframes bit-large {
    0%   {width: 4px;}
    100% {width: 100%;}
}
@keyframes large-bit {
    0%   {width: 4px;}
    100% {width: 100%;}
}
.timeline-empty-bit {
    animation-name: empty-bit;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-delay: 200ms;
}
.timeline-bit-large {
    animation-name: bit-large;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
}
.timeline-large-bit {
    animation-name: large-bit;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
    animation-delay: 200ms;
}
.timeline-bit-empty {
    animation-name: bit-empty;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
}

var containers = document.getElementsByClassName("timeline-gauge-container");
var length = containers.length;

for (var i = 0; i < length; i++) {
    containers[i].style.width = containers[i].getAttribute("percentage");
}

var parts = document.getElementsByClassName("timeline-gauge-part");
var length = parts.length;

for (var i = 0; i < length; i++) {
    parts[i].style.backgroundColor = parts[i].getAttribute("color");
}

var index = 0;

parts[0].classList.add("timeline-empty-bit");

function removeAnimation(part) {
    part.classList.remove("timeline-empty-bit");
    part.classList.remove("timeline-bit-large");
    part.classList.remove("timeline-large-bit");
    part.classList.remove("timeline-bit-empty");
}

document.onkeydown = function(event) {
    if (event.keyCode == 37 && index > 0) {
        removeAnimation(parts[index - 1]);
        parts[index - 1].classList.add("timeline-large-bit");
        
        if (index != length) {
            removeAnimation(parts[index]);
            parts[index].classList.add("timeline-bit-empty");
        }
        
        index--;
    }
    
    if (event.keyCode == 39 && index < length) {
        removeAnimation(parts[index]);
        parts[index].classList.add("timeline-bit-large");
        
        if (index != length - 1) {
            removeAnimation(parts[index + 1]);
            parts[index + 1].classList.add("timeline-empty-bit");
        }
        
        index++;
    }
};

.timeline-gauge {
    height: 20px;
}
.timeline-gauge-container {
    display: inline-block;
    height: 100%;
}
.timeline-gauge-part {
    display: block;
    height: 100%;
    width: 0%;
}
@keyframes empty-bit {
    0%   {width: 0%;}
    100% {width: 4px;}
}
@keyframes bit-empty {
    0%   {width: 0%;}
    100% {width: 4px;}
}
@keyframes bit-large {
    0%   {width: 4px;}
    100% {width: 100%;}
}
@keyframes large-bit {
    0%   {width: 4px;}
    100% {width: 100%;}
}
.timeline-empty-bit {
    animation-name: empty-bit;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-delay: 200ms;
}
.timeline-bit-large {
    animation-name: bit-large;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
}
.timeline-large-bit {
    animation-name: large-bit;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
    animation-delay: 200ms;
}
.timeline-bit-empty {
    animation-name: bit-empty;
    animation-fill-mode: both;
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
}

<div class="timeline-container">
    <div class="timeline-gauge">
        <div class="timeline-gauge-container" percentage="5%"><span class="timeline-gauge-part" color="#4f5f6b"></span></div><div class="timeline-gauge-container" percentage="20%"><span class="timeline-gauge-part" color="#237487"></span></div><div class="timeline-gauge-container" percentage="10%"><span class="timeline-gauge-part" color="#00b188"></span></div><div class="timeline-gauge-container" percentage="20%"><span class="timeline-gauge-part" color="#008e6c"></span></div><div class="timeline-gauge-container" percentage="25%"><span class="timeline-gauge-part" color="#99ca34"></span></div><div class="timeline-gauge-container" percentage="20%"><span class="timeline-gauge-part" color="#9059a2"></span></div>
    </div>
</div>

View JSFiddle

但更好的解决方案是完全不使用动画。在我看来，在这种情况下，过渡是一种更好的工作工具:

.timeline-gauge {
    height: 20px;
}
.timeline-gauge-container {
    display: inline-block;
    height: 100%;
}
.timeline-gauge-part {
    display: block;
    height: 100%;
    width: 0%;

    transition: width 200ms ease-in-out;
}

.timeline-empty-bit {
    width: 4px;
    transition-delay: 200ms;
}
.timeline-bit-large {
    width: 100%;
}
.timeline-large-bit {
    width: 4px;
    transition-delay: 200ms;
}
.timeline-bit-empty {
    width: 0%;
}

var containers = document.getElementsByClassName("timeline-gauge-container");
var length = containers.length;

for (var i = 0; i < length; i++) {
    containers[i].style.width = containers[i].getAttribute("percentage");
}

var parts = document.getElementsByClassName("timeline-gauge-part");
var length = parts.length;

for (var i = 0; i < length; i++) {
    parts[i].style.backgroundColor = parts[i].getAttribute("color");
}

var index = 0;

parts[0].classList.add("timeline-empty-bit");

function removeAnimation(part) {
    part.classList.remove("timeline-empty-bit");
    part.classList.remove("timeline-bit-large");
    part.classList.remove("timeline-large-bit");
    part.classList.remove("timeline-bit-empty");
}

document.onkeydown = function(event) {
    if (event.keyCode == 37 && index > 0) {
        removeAnimation(parts[index - 1]);
        parts[index - 1].classList.add("timeline-large-bit");
        
        if (index != length) {
            removeAnimation(parts[index]);
            parts[index].classList.add("timeline-bit-empty");
        }
        
        index--;
    }
    
    if (event.keyCode == 39 && index < length) {
        removeAnimation(parts[index]);
        parts[index].classList.add("timeline-bit-large");
        
        if (index != length - 1) {
            removeAnimation(parts[index + 1]);
            parts[index + 1].classList.add("timeline-empty-bit");
        }
        
        index++;
    }
};

.timeline-gauge {
    height: 20px;
}
.timeline-gauge-container {
    display: inline-block;
    height: 100%;
}
.timeline-gauge-part {
    display: block;
    height: 100%;
    width: 0%;
    
    transition: width 200ms ease-in-out;
}

.timeline-empty-bit {
    width: 4px;
    transition-delay: 200ms;
}
.timeline-bit-large {
    width: 100%;
}
.timeline-large-bit {
    width: 4px;
    transition-delay: 200ms;
}
.timeline-bit-empty {
    width: 0%;
}

<div class="timeline-container">
    <div class="timeline-gauge">
        <div class="timeline-gauge-container" percentage="5%"><span class="timeline-gauge-part" color="#4f5f6b"></span></div><div class="timeline-gauge-container" percentage="20%"><span class="timeline-gauge-part" color="#237487"></span></div><div class="timeline-gauge-container" percentage="10%"><span class="timeline-gauge-part" color="#00b188"></span></div><div class="timeline-gauge-container" percentage="20%"><span class="timeline-gauge-part" color="#008e6c"></span></div><div class="timeline-gauge-container" percentage="25%"><span class="timeline-gauge-part" color="#99ca34"></span></div><div class="timeline-gauge-container" percentage="20%"><span class="timeline-gauge-part" color="#9059a2"></span></div>
    </div>
</div>

View JSFiddle