Как сделать панель таймера Javascript?

Question

я в основном просто хочу знать, как сделать это:

http://codepen.io/rjtkoh/pen/OPeNWP

.timerwrapper { 
    height: 60px; 
    width: 100%; 
    background: #484949; 
    position: relative; 
    margin: auto; 
} 

shrinking($item, $duration) { 
    $duration = unit($duration, 's'); 

    {$item} { 
    width: 0%; 
    height: 60px; 
    position: absolute; 
    bottom: 0;  
    animation: fillBar $duration ease-in infinite; 
    background-image: linear-gradient(to right, #f00439, #f28d0d); 
    } 

    @keyframes fillBar { 
     0% { 
     width: 100%; 
     } 
     100% { 
     width: 0%; 
     } 
    } 
} 

// Premier parametre : container class 
// Second parametre : temps de l'animation en secondes 
shrinking('.shrinking', 60); 

Я взял вводные JS учебники по Codecademy и Treehouse. Однако я не чувствую, что знаю достаточно, чтобы понять, что происходит в Кодепене. Я хотел бы воссоздать то, что есть в обычном CSS/Javascript, без Stylus.

Может ли кто-нибудь указать мне в сторону некоторых хороших уроков, которые были бы важны при создании этого таймера?

Так что в основном я просто хочу, чтобы панель, которая сжимается по истечении установленного временного предела, падает.

Спасибо.

Answer 1

его совсем как они делают это на кодепен. они просто получают рассчитанную продолжительность анимации css.

вы можете просто установить продолжительность до фиксированного значения, равного 10 с (10 секунд), и это будет одинаково.

animation-name: fillBar; 
animation-duration: 10s; 
animation-timing-function: ease-in; 
animation-iteration-count: 1; 
animation-direction: alternate; 

также сделал вас fiddle. не забудьте указать его. (приставка включена в скрипку).

, если вы хотите узнать больше о анимации и ключевые кадры нажмите here,

и here некоторые другие хорошие примеры.

рефов:

css animation.

animation-name

animation-duration

animation-timing-function

animation-iteration-count

animation-direction

приветствие Тимми