카운트 다운 타이머 CSS 분석

Question

프런트 엔드 웹 개발자에 대해 자세히 알아보고 웹에서 찾은 다양한 멋진 요소의 페이지 소스를 보려고합니다. 나는 this에 와서 그들이 카운트 다운을 위해 CSS를 어떻게 수행했는지 이해하려고 시도하고있었습니다. 난 단지 HTML의 일부를 이해하고 예제를 계속 어디 발견했습니다 내가 jsfiddle에서 그것을 재현 할 수 있다면

는

<div class="countdown-container" id="main-example"> 

훨씬 명확하게 될 것이다 그러나 나는 할 수 없습니다. 모든 통찰력이 인정됩니다.

Answer 1

"플립 - 다운"효과를 얻으려면 CSS 애니메이션이나 전환 효과를 사용할 수 있습니다.

다음은 CSS 애니메이션 (스타일을 제외한)을 사용하여이를 수행하는 방법을 간단하게 보여줍니다. 전환은 비슷하게 작동하지만 상태가 변경되어야합니다 (예 : :hover). 난 단지 크롬에 대한 접두사, 그래서 당신은 크롬을 열거 나 추가 접두사를 추가해야합니다 : plnkr

참고 :

@-webkit-keyframes flip-top { 
    0% { 
    transform: rotateX(0deg); 
    transform-origin: 50% 100%; 
    } 
    50% { 
    transform: rotateX(-90deg); 
    } 
    100% { 
    transform: rotateX(-90deg); 
    transform-origin: 50% 100%; 
    } 
} 
@-webkit-keyframes flip-bottom { 
    0% { 
    transform: rotateX(-90deg); 
    transform-origin: 100% 0%; 
    } 
    50% { 
    transform: rotateX(-90deg); 
    } 
    100% { 
    transform: rotateX(0deg); 
    transform-origin: 100% 0%; 
    } 
}.top.curr { 
    z-index: 1; 
    -webkit-animation: flip-top 2s ease-in infinite; 
} 

.top.next { 
    z-index: 0; 
} 

.bottom.curr { 
    z-index: 0; 
} 

.bottom.next { 
    z-index: 1; 
    -webkit-animation: flip-bottom 2s ease-out infinite; 
} 

여기에 함께 놀러 할 수있는 예입니다.