CSS3 Timer Animation

by Dini Mer

HTML

<ul class="time">
    <li data-bind="css: { disabled: stateForecastFullday }">
        <div>
            <a class="autoplay-toggler" title="Prognose für einzelne Tagesabschnitte abspielen" data-bind="css: { active: stateForecastAutoplay, playing: stateForecastAutoplay }, click: toggleForecastAutoplay">
                <span></span>
                <!-- play only once (transition-duration = timerDuration / 2)-->
                <!--
                <time class="timer">
                    <i class="l"><i style="transition-duration: 1.5s; transition-delay: 1.5s;"></i></i>
                    <i class="r"><i style="transition-duration: 1.5s;"></i></i>
                </time>
                -->
                <!-- play infinite (animation-duration = timerDuration) -->
                <time class="timer repeat">
                    <i class="l"><i style="animation-duration: 3s;"></i></i>
                    <i class="r"><i style="animation-duration: 3s;"></i></i>
                </time>
            </a>
        </div>
    </li>
</ul>

CSS

/* Existing CSS */

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul { margin: 0; padding: 0; list-style: none; }
ul:after { display: table; content: ''; clear: both; }

.time { margin-top: 10px; }
.time > li { float: left; width: 14.285714285714286%; border-left: 1px solid #f5f5f5; background-color: #e6e6e6; }
.time > li > div { -webkit-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out; }
.time > li > div a { display: block; background-color: #e6e6e6; text-decoration: none; text-align: center;color: inherit; cursor: pointer; -webkit-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out; padding: 25px 5px; line-height: 16px; }
.time > li > div a span { display: block; margin: 0 auto; width: 14px; }
.time > li a.autoplay-toggler span:before { display: inline-block; content: ''; width: 14px; height: 16px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #000000; border-right: 0 solid #000000; vertical-align: top; -webkit-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 200ms ease-out; }

.time > li > div a.active { background-color: #ffffff; }
.time > li > div a.autoplay-toggler.playing span:before { border-width: 0 6px 0; }

/* Existing CSS */

/* New CSS */
.time > li a.autoplay-toggler {
    position: relative;
}
.time > li a.autoplay-toggler > span {
    position: relative;
    z-index: 2;
}

.timer {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    opacity: 0;
    z-index: 1;
}

.timer > i {
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 50%;
    height: 100%;
}

.timer > i.l {
    left: 0;
}

.timer > i.r {
    left: auto;
    right: 0;
}

.timer > i i {
    display: block;
   ...

JavaScript

$('a').on('click', function(e) {
   $(this).toggleClass('active playing');
    e.preventDefault(); 
});