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

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

添加多个＆＃39;％＆＃39;值告诉您的浏览器应该在什么时间点达到什么值，所以第一个动画基本上已经在5％的时间后完成了。

关键帧CSS动画

1 个答案: