|
|
| Line 1: |
Line 1: |
| − | <html>
| + | |
| − | <section class="cd-horizontal-timeline">
| + | |
| − | <div class="timeline">
| + | |
| − | <div class="events-wrapper">
| + | |
| − | <div class="events">
| + | |
| − | <ol>
| + | |
| − | <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
| + | |
| − | <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
| + | |
| − | <!-- other dates here -->
| + | |
| − | </ol>
| + | |
| − |
| + | |
| − | <span class="filling-line" aria-hidden="true"></span>
| + | |
| − | </div> <!-- .events -->
| + | |
| − | </div> <!-- .events-wrapper -->
| + | |
| − |
| + | |
| − | <ul class="cd-timeline-navigation">
| + | |
| − | <li><a href="#0" class="prev inactive">Prev</a></li>
| + | |
| − | <li><a href="#0" class="next">Next</a></li>
| + | |
| − | </ul> <!-- .cd-timeline-navigation -->
| + | |
| − | </div> <!-- .timeline -->
| + | |
| − |
| + | |
| − | <div class="events-content">
| + | |
| − | <ol>
| + | |
| − | <li class="selected" data-date="16/01/2014">
| + | |
| − | <h2>Horizontal Timeline</h2>
| + | |
| − | <em>January 16th, 2014</em>
| + | |
| − | <p>
| + | |
| − | ......
| + | |
| − | </p>
| + | |
| − | </li>
| + | |
| − |
| + | |
| − | <li data-date="28/02/2014">
| + | |
| − | <!-- event description here -->
| + | |
| − | </li>
| + | |
| − |
| + | |
| − | <!-- other descriptions here -->
| + | |
| − | </ol>
| + | |
| − | </div> <!-- .events-content -->
| + | |
| − | </section>
| + | |
| − | .cd-horizontal-timeline .events-content {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | .cd-horizontal-timeline .events-content li {
| + | |
| − | position: absolute;
| + | |
| − | z-index: 1;
| + | |
| − | width: 100%;
| + | |
| − | left: 0;
| + | |
| − | top: 0;
| + | |
| − | transform: translateX(-100%);
| + | |
| − | opacity: 0;
| + | |
| − | animation-duration: 0.4s;
| + | |
| − | animation-timing-function: ease-in-out;
| + | |
| − | }
| + | |
| − | .cd-horizontal-timeline .events-content li.selected {
| + | |
| − | /* visible event content */
| + | |
| − | position: relative;
| + | |
| − | z-index: 2;
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | .cd-horizontal-timeline .events-content li.enter-right,
| + | |
| − | .cd-horizontal-timeline .events-content li.leave-right {
| + | |
| − | animation-name: cd-enter-right;
| + | |
| − | }
| + | |
| − | .cd-horizontal-timeline .events-content li.enter-left,
| + | |
| − | .cd-horizontal-timeline .events-content li.leave-left {
| + | |
| − | animation-name: cd-enter-left;
| + | |
| − | }
| + | |
| − | .cd-horizontal-timeline .events-content li.leave-right,
| + | |
| − | .cd-horizontal-timeline .events-content li.leave-left {
| + | |
| − | animation-direction: reverse;
| + | |
| − | }
| + | |
| − | @keyframes cd-enter-right {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(100%);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0%);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @keyframes cd-enter-left {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateX(-100%);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0%);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </html>
| + | |
