0
안녕하세요 나는 플립 카운트 다운 타이머를 시뮬레이션하기 위해 노력하고있어하지만 코드를 쓸 때 나는 사이에 차이가 있다는 것을 발견 :키 프레임 CSS 애니메이션
@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 {
\t list-style-type: none;
\t width: 100%;
\t height: 100%;
\t padding: 0px;
\t position: relative;
}
ul#initial li {
\t position: absolute;
\t top: 0;
\t left: 0;
\t text-align: center;
\t 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 {
\t height: 50px;
\t width: 50px;
\t background: #0034ff;
\t color: #fff;
\t overflow: hidden;
\t position: absolute;
\t top: auto;
\t left: 0;
\t bottom: 0;
}
.digit {
\t height: 200%;
\t font-size: 80px;
\t position: absolute;
\t width: 50px;
\t text-align: center;
\t text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}
.flipthis-down .digit {
\t bottom: 0;
}
@-webkit-keyframes flipthis {
\t 0% {
\t \t transform: rotateX(0deg);
\t }
\t 100% {
\t \t transform: rotateX(-90deg);
\t }
}
.flipthis2 {
\t height: 50px;
\t width: 50px;
\t background: #00ff82;
\t color: #fff;
\t overflow: hidden;
\t position: absolute;
\t top: 0;
\t left: 0;
}
.flipthis2-down {
\t height: 50px;
\t width: 50px;
\t background: #00f760;
\t color: #fff;
\t -webkit-transform-origin: 50% 0%;
\t overflow: hidden;
\t position: absolute;
\t top: auto;
\t left: 0;
\t bottom: 0;
\t animation: flipthis-down 1s 1s linear;
}
.flipthis2-down .digit {
\t bottom: 0;
}
@-webkit-keyframes flipthis-down {
\t 0% {
\t \t transform: rotateX(90deg);
\t }
\t 100% {
\t \t transform: rotateX(0deg);
\t }
}
a.derp {
\t -webkit-perspective: 2000px;
\t display: block;
\t width: 50px;
\t 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>
무슨 문제입니까? 당신은 문제를 언급하고 그것이 무엇인지 말하지 않습니다. – Carcigenicate
위의 키 프레임과 그 사이의 기술 차이점은 무엇입니까? –