javascript - 关键帧 CSS 动画

Question

你好我正在尝试模拟翻转倒数计时器但是当我编写代码时我发现两者之间存在差异:

@keyframes zindex {
0% {
    z-index: 2;
}
5% {
    z-index: 4;
}
100% {
    z-index: 4;
}
}

和:

@keyframes zindex {
0% {
    z-index: 2;
}
100% {
    z-index: 4;
}
}

当我删除 5% 时会出现问题，所以我想知道为什么会出现此问题。

这是我的代码:

body {
    font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
}
.wrap {
    width: 50px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -25px;
}
ul#initial {
	list-style-type: none;
	width: 100%;
	height: 100%;
	padding: 0px;
	position: relative;
}

ul#initial li {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
}
.first {
    z-index: 3;
}

.second {
    -webkit-animation: zindex 1s 1s linear both;
}
@keyframes zindex {
    0% {
        z-index: 2;
    }
    5% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}
.flipthis {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #bbb;
    transform-origin: 50% 100%;
    color: #fff;
    animation: flipthis 1s linear;
}

.flipthis-down {
	height: 50px;
	width: 50px;
	background: #0034ff;
	color: #fff;
	overflow: hidden;
	position: absolute;
	top: auto;
	left: 0;
	bottom: 0;
}

.digit {
	height: 200%;
	font-size: 80px;
	position: absolute;
	width: 50px;
	text-align: center;
	text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}

.flipthis-down .digit {
	bottom: 0;
}
@-webkit-keyframes flipthis {
	0% {
		transform: rotateX(0deg);
	}
	100% {
		transform: rotateX(-90deg);
	}
}
.flipthis2 {
	height: 50px;
	width: 50px;
	background: #00ff82;
	color: #fff;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.flipthis2-down {
	height: 50px;
	width: 50px;
	background: #00f760;
	color: #fff;
	-webkit-transform-origin: 50% 0%;
	overflow: hidden;
	position: absolute;
	top: auto;
	left: 0;
	bottom: 0;
	animation: flipthis-down 1s 1s linear;
}

.flipthis2-down .digit {
	bottom: 0;
}
@-webkit-keyframes flipthis-down {
	0% {
		transform: rotateX(90deg);
	}
	100% {
		transform: rotateX(0deg);
	}
}
a.derp {
	-webkit-perspective: 2000px;
	display: block;
	width: 50px;
	height: 100px;
}

<div class="wrap">
        <ul id="initial">
            <li class="first">
                <a class="derp">
                    <div class="flipthis">
                        <div class="digit">1</div>
                    </div>
                    <div class="flipthis-down">
                        <div class="digit">1</div>
                    </div>
                </a>
            </li>
            <li class="second">
                <a class="derp">
                    <div class="flipthis2">
                        <div class="digit">2</div>
                    </div>
                    <div class="flipthis2-down">
                        <div class="digit">2</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>

Answer 1

第一个示例在仅完成 5% 的动画后达到最终值“4”，第二个示例在指定的动画持续时间内线性增加 z-index。

添加多个“%”值会告诉您的浏览器在什么时间点应该达到什么值，因此您的第一个动画基本上已经在 5% 的时间过去后完成。