JQuery简易时间轴功能

场景：需要对某一系列用户的操作进行时间点记录和时间轴展示

参考资料：时间轴网址 —> 对应Git地址

需要用到的JS和CSS：

插件自带功能与使用场景有些许不符，需要改造

1.新增自定义宽度属性：


2.显示问题修改：

3.修改部分自己业务需要的css样式，不在这里展开。

详细使用过程

1.定义Html元素（空DIV实体）：

    <div class="regionForTimeAxios"style="height:95%;">
        <div id="report_Time_Axios" class="timeline">
            <div class="timeline__wrap" style="height:100%;width: 100%; overflow-x: auto">
                <div class="timeline__items">
				
                </div>
            </div>
        </div>
    </div>

2.构造时间点Html串，并塞入页面中：

 var timeLineHtml = '';
 //时间轴列表数据构造Html
 $.each(dataList, function (io, vo) {
     timeLineHtml += '<div class="timeline__item"><div class="timeline__content"><div class="reportTimeLineToolTip" style="width:170px;padding:2.5px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><span>【' + vo.on + '】</span><span>' + convertOpType(vo) + '</span></div><span>' + new Date(vo.time).format('yyyy-MM-dd hh:mm:ss') + '</span></div></div > '
 });
 if (timeLineHtml) {
     //塞入元素
     $('#report_Time_Axios .timeline__wrap .timeline__items').append(timeLineHtml)
     //时间轴渲染
     $('#report_Time_Axios').timeline({
         mode: 'horizontal',
         itemDefaultWidth: 200,
         //更多属性可查看JS
     });
 }

3.页面效果：

（看起来是左右滑动，实际上中间的轴并没有动）
如果设计到数据切换，渲染新数据前直接清空Div里的内容重新渲染即可。

修改后的JS和CSS文件

// https://squarechip.github.io/timeline/ 来源地址
function timeline(collection, options) {
  const timelines = [];
  const warningLabel = 'Timeline:';
  let winWidth = window.innerWidth;
  let resizeTimer;
  let currentIndex = 0;
  // Set default settings
    const defaultSettings = {
        forceVerticalMode: {
            type: 'integer',
            defaultValue: 600
        },
        horizontalStartPosition: {
            type: 'string',
            acceptedValues: ['bottom', 'top'],
            defaultValue: 'top'
        },
        mode: {
            type: 'string',
            acceptedValues: ['horizontal', 'vertical'],
            defaultValue: 'vertical'
        },
        moveItems: {
            type: 'integer',
            defaultValue: 1
        },
        rtlMode: {
            type: 'boolean',
            acceptedValues: [true, false],
            defaultValue: false
        },
        startIndex: {
            type: 'integer',
            defaultValue: 0
        },
        verticalStartPosition: {
            type: 'string',
            acceptedValues: ['left', 'right'],
            defaultValue: 'left'
        },
        verticalTrigger: {
            type: 'string',
            defaultValue: '15%'
        },
        visibleItems: {
            type: 'integer',
            defaultValue: 3
        },
        itemDefaultWidth: {
            type: 'integer',
            defaultValue: 0
        }
    };

  // Helper function to test whether values are an integer
  function testValues(value, settingName) {
    if (typeof value !== 'number' && value % 1 !== 0) {
      console.warn(`${warningLabel} The value "${value}" entered for the setting "${settingName}" is not an integer.`);
      return false;
    }
    return true;
  }

  // Helper function to wrap an element in another HTML element
  function itemWrap(el, wrapper, classes) {
    wrapper.classList.add(classes);
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
  }

  // Helper function to wrap each element in a group with other HTML elements
  function wrapElements(items) {
    items.forEach((item) => {
      itemWrap(item.querySelector('.timeline__content'), document.createElement('div'), 'timeline__content__wrap');
      itemWrap(item.querySelector('.timeline__content__wrap'), document.createElement('div'), 'timeline__item__inner');
    });
  }

  // Helper function to check if an element is partially in the viewport
  function isElementInViewport(el, triggerPosition) {
    const rect = el.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const defaultTrigger = defaultSettings.verticalTrigger.defaultValue.match(/(\d*\.?\d*)(.*)/);
    let triggerUnit = triggerPosition.unit;
    let triggerValue = triggerPosition.value;
    let trigger = windowHeight;
    if (triggerUnit === 'px' && triggerValue >= windowHeight) {
      console.warn('The value entered for the setting "verticalTrigger" is larger than the window height. The default value will be used instead.');
      [, triggerValue, triggerUnit] = defaultTrigger;
    }
    if (triggerUnit === 'px') {
      trigger = parseInt(trigger - triggerValue, 10);
    } else if (triggerUnit === '%') {
      trigger = parseInt(trigger * ((100 - triggerValue) / 100), 10);
    }
    return (
      rect.top <= trigger
      && rect.left <= (window.innerWidth || document.documentElement.clientWidth)
      && (rect.top + rect.height) >= 0
      && (rect.left + rect.width) >= 0
    );
  }

  // Helper function to add transform styles
  function addTransforms(el, transform) {
    el.style.webkitTransform = transform;
    el.style.msTransform = transform;
    el.style.transform = transform;
  }

  // Create timelines
  function createTimelines(timelineEl) {
    const timelineName = timelineEl.id ? `#${timelineEl.id}` : `.${timelineEl.className}`;
    const errorPart = 'could not be found as a direct descendant of';
    const data = timelineEl.dataset;
    let wrap;
    let scroller;
    let items;
    const settings = {};

    // Test for correct HTML structure
    try {
      wrap = timelineEl.querySelector('.timeline__wrap');
      if (!wrap) {
        throw new Error(`${warningLabel} .timeline__wrap ${errorPart} ${timelineName}`);
      } else {
        scroller = wrap.querySelector('.timeline__items');
        if (!scroller) {
          throw new Error(`${warningLabel} .timeline__items ${errorPart} .timeline__wrap`);
        } else {
          items = [].slice.call(scroller.children, 0);
        }
      }
    } catch (e) {
      console.warn(e.message);
      return false;
    }

    // Test setting input values
    Object.keys(defaultSettings).forEach((key) => {
      settings[key] = defaultSettings[key].defaultValue;

      if (data[key]) {
        settings[key] = data[key];
      } else if (options && options[key]) {
        settings[key] = options[key];
      }

      if (defaultSettings[key].type === 'integer') {
        if (!settings[key] || !testValues(settings[key], key)) {
          settings[key] = defaultSettings[key].defaultValue;
        }
      } else if (defaultSettings[key].type === 'string') {
        if (defaultSettings[key].acceptedValues && defaultSettings[key].acceptedValues.indexOf(settings[key]) === -1) {
          console.warn(`${warningLabel} The value "${settings[key]}" entered for the setting "${key}" was not recognised.`);
          settings[key] = defaultSettings[key].defaultValue;
        }
      }
    });

    // Further specific testing of input values
    const defaultTrigger = defaultSettings.verticalTrigger.defaultValue.match(/(\d*\.?\d*)(.*)/);
    const triggerArray = settings.verticalTrigger.match(/(\d*\.?\d*)(.*)/);
    let [, triggerValue, triggerUnit] = triggerArray;
    let triggerValid = true;
    if (!triggerValue) {
      console.warn(`${warningLabel} No numercial value entered for the 'verticalTrigger' setting.`);
      triggerValid = false;
    }
    if (triggerUnit !== 'px' && triggerUnit !== '%') {
      console.warn(`${warningLabel} The setting 'verticalTrigger' must be a percentage or pixel value.`);
      triggerValid = false;
    }
    if (triggerUnit === '%' && (triggerValue > 100 || triggerValue < 0)) {
      console.warn(`${warningLabel} The 'verticalTrigger' setting value must be between 0 and 100 if using a percentage value.`);
      triggerValid = false;
    } else if (triggerUnit === 'px' && triggerValue < 0) {
      console.warn(`${warningLabel} The 'verticalTrigger' setting value must be above 0 if using a pixel value.`);
      triggerValid = false;
    }

    if (triggerValid === false) {
      [, triggerValue, triggerUnit] = defaultTrigger;
    }

    settings.verticalTrigger = {
      unit: triggerUnit,
      value: triggerValue
    };

    if (settings.moveItems > settings.visibleItems) {
      console.warn(`${warningLabel} The value of "moveItems" (${settings.moveItems}) is larger than the number of "visibleItems" (${settings.visibleItems}). The value of "visibleItems" has been used instead.`);
      settings.moveItems = settings.visibleItems;
    }

    if (settings.startIndex > (items.length - settings.visibleItems) && items.length > settings.visibleItems) {
      console.warn(`${warningLabel} The 'startIndex' setting must be between 0 and ${items.length - settings.visibleItems} for this timeline. The value of ${items.length - settings.visibleItems} has been used instead.`);
      settings.startIndex = items.length - settings.visibleItems;
    } else if (items.length <= settings.visibleItems) {
      console.warn(`${warningLabel} The number of items in the timeline must exceed the number of visible items to use the 'startIndex' option.`);
      settings.startIndex = 0;
    } else if (settings.startIndex < 0) {
      console.warn(`${warningLabel} The 'startIndex' setting must be between 0 and ${items.length - settings.visibleItems} for this timeline. The value of 0 has been used instead.`);
      settings.startIndex = 0;
    }

    timelines.push({
      timelineEl,
      wrap,
      scroller,
      items,
      settings
    });
  }

  if (collection.length) {
    [].forEach.call(collection, createTimelines);
  }

  // Set height and widths of timeline elements and viewport
  function setHeightandWidths(tl) {
    // Set widths of items and viewport
    function setWidths() {
      tl.itemWidth = tl.settings.itemDefaultWidth > 0 ? tl.settings.itemDefaultWidth: tl.wrap.offsetWidth / tl.settings.visibleItems;
      tl.items.forEach((item) => {
        item.style.width = `${tl.itemWidth}px`;
      });
      tl.scrollerWidth = tl.itemWidth * tl.items.length;
      tl.scroller.style.width = `${tl.scrollerWidth}px`;
    }

    // Set height of items and viewport
    function setHeights() {
      let oddIndexTallest = 0;
      let evenIndexTallest = 0;
      tl.items.forEach((item, i) => {
        item.style.height = 'auto';
        const height = item.offsetHeight;
        if (i % 2 === 0) {
          evenIndexTallest = height > evenIndexTallest ? height : evenIndexTallest;
        } else {
          oddIndexTallest = height > oddIndexTallest ? height : oddIndexTallest;
        }
      });

      const transformString = `translateY(${evenIndexTallest}px)`;
      tl.items.forEach((item, i) => {
        if (i % 2 === 0) {
          item.style.height = `${evenIndexTallest}px`;
          if (tl.settings.horizontalStartPosition === 'bottom') {
            item.classList.add('timeline__item--bottom');
            addTransforms(item, transformString);
          } else {
            item.classList.add('timeline__item--top');
          }
        } else {
          item.style.height = `${oddIndexTallest}px`;
          if (tl.settings.horizontalStartPosition !== 'bottom') {
            item.classList.add('timeline__item--bottom');
            addTransforms(item, transformString);
          } else {
            item.classList.add('timeline__item--top');
          }
        }
      });
      if (tl.items.length == 1) {
          tl.scroller.style.height = `${evenIndexTallest * 2}px`;
      } else {
          tl.scroller.style.height = `${evenIndexTallest + oddIndexTallest}px`;
      }
    }

    if (window.innerWidth > tl.settings.forceVerticalMode) {
      setWidths();
      setHeights();
    }
  }

  // Create and add arrow controls to horizontal timeline
  function addNavigation(tl) {
    if (tl.items.length > tl.settings.visibleItems) {
      const prevArrow = document.createElement('button');
      const nextArrow = document.createElement('button');
      const topPosition = tl.items[0].offsetHeight;
      prevArrow.className = 'timeline-nav-button timeline-nav-button--prev';
      nextArrow.className = 'timeline-nav-button timeline-nav-button--next';
      prevArrow.textContent = 'Previous';
      nextArrow.textContent = 'Next';
      prevArrow.style.top = `${topPosition}px`;
      nextArrow.style.top = `${topPosition}px`;
      if (currentIndex === 0) {
        prevArrow.disabled = true;
      } else if (currentIndex === (tl.items.length - tl.settings.visibleItems)) {
        nextArrow.disabled = true;
      }
      //tl.timelineEl.appendChild(prevArrow);
      //tl.timelineEl.appendChild(nextArrow);
    }
  }

  // Add the centre line to the horizontal timeline
  function addHorizontalDivider(tl) {
    const divider = tl.timelineEl.querySelector('.timeline-divider');
    if (divider) {
      tl.timelineEl.removeChild(divider);
    }
    const topPosition = tl.items[0].offsetHeight;
    const horizontalDivider = document.createElement('span');
    horizontalDivider.className = 'timeline-divider';
    horizontalDivider.style.top = `${topPosition}px`;
    tl.timelineEl.appendChild(horizontalDivider);
  }

  // Calculate the new position of the horizontal timeline
  function timelinePosition(tl) {
    const position = tl.items[currentIndex].offsetLeft;
    const str = `translate3d(-${position}px, 0, 0)`;
    addTransforms(tl.scroller, str);
  }

  // Make the horizontal timeline slide
  function slideTimeline(tl) {
    const navArrows = tl.timelineEl.querySelectorAll('.timeline-nav-button');
    const arrowPrev = tl.timelineEl.querySelector('.timeline-nav-button--prev');
    const arrowNext = tl.timelineEl.querySelector('.timeline-nav-button--next');
    const maxIndex = tl.items.length - tl.settings.visibleItems;
    const moveItems = parseInt(tl.settings.moveItems, 10);
    [].forEach.call(navArrows, (arrow) => {
      arrow.addEventListener('click', function(e) {
        e.preventDefault();
        currentIndex = this.classList.contains('timeline-nav-button--next') ? (currentIndex += moveItems) : (currentIndex -= moveItems);
        if (currentIndex === 0 || currentIndex < 0) {
          currentIndex = 0;
          arrowPrev.disabled = true;
          arrowNext.disabled = false;
        } else if (currentIndex === maxIndex || currentIndex > maxIndex) {
          currentIndex = maxIndex;
          arrowPrev.disabled = false;
          arrowNext.disabled = true;
        } else {
          arrowPrev.disabled = false;
          arrowNext.disabled = false;
        }
        timelinePosition(tl);
      });
    });
  }

  // Set up horizontal timeline
  function setUpHorinzontalTimeline(tl) {
    if (tl.settings.rtlMode) {
      currentIndex = tl.items.length > tl.settings.visibleItems ? tl.items.length - tl.settings.visibleItems : 0;
    } else {
      currentIndex = tl.settings.startIndex;
    }
    tl.timelineEl.classList.add('timeline--horizontal');
    setHeightandWidths(tl);
    timelinePosition(tl);
    addNavigation(tl);
    addHorizontalDivider(tl);
    slideTimeline(tl);
  }

  // Set up vertical timeline
  function setUpVerticalTimeline(tl) {
    let lastVisibleIndex = 0;
    tl.items.forEach((item, i) => {
      item.classList.remove('animated', 'fadeIn');
      if (!isElementInViewport(item, tl.settings.verticalTrigger) && i > 0) {
        item.classList.add('animated');
      } else {
        lastVisibleIndex = i;
      }
      const divider = tl.settings.verticalStartPosition === 'left' ? 1 : 0;
      if (i % 2 === divider && window.innerWidth > tl.settings.forceVerticalMode) {
        item.classList.add('timeline__item--right');
      } else {
        item.classList.add('timeline__item--left');
      }
    });
    for (let i = 0; i < lastVisibleIndex; i += 1) {
      tl.items[i].classList.remove('animated', 'fadeIn');
    }
    // Bring elements into view as the page is scrolled
    window.addEventListener('scroll', () => {
      tl.items.forEach((item) => {
        if (isElementInViewport(item, tl.settings.verticalTrigger)) {
          item.classList.add('fadeIn');
        }
      });
    });
  }

  // Reset timelines
  function resetTimelines(tl) {
    tl.timelineEl.classList.remove('timeline--horizontal', 'timeline--mobile');
    tl.scroller.removeAttribute('style');
    tl.items.forEach((item) => {
      item.removeAttribute('style');
      item.classList.remove('animated', 'fadeIn', 'timeline__item--left', 'timeline__item--right');
    });
    const navArrows = tl.timelineEl.querySelectorAll('.timeline-nav-button');
    [].forEach.call(navArrows, (arrow) => {
      arrow.parentNode.removeChild(arrow);
    });
  }

  // Set up the timelines
  function setUpTimelines() {
    timelines.forEach((tl) => {
      tl.timelineEl.style.opacity = 0;
      if (!tl.timelineEl.classList.contains('timeline--loaded')) {
        wrapElements(tl.items);
      }
      resetTimelines(tl);
      if (window.innerWidth <= tl.settings.forceVerticalMode) {
        tl.timelineEl.classList.add('timeline--mobile');
      }
      if (tl.settings.mode === 'horizontal' && window.innerWidth > tl.settings.forceVerticalMode) {
        setUpHorinzontalTimeline(tl);
      } else {
        setUpVerticalTimeline(tl);
      }
      tl.timelineEl.classList.add('timeline--loaded');
      setTimeout(() => {
        tl.timelineEl.style.opacity = 1;
      }, 500);
    });
  }

  // Initialise the timelines on the page
  setUpTimelines();

  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      const newWinWidth = window.innerWidth;
      if (newWinWidth !== winWidth) {
        setUpTimelines();
        winWidth = newWinWidth;
      }
    }, 250);
  });
}

// Register as a jQuery plugin if the jQuery library is present
if (window.jQuery) {
  (($) => {
    $.fn.timeline = function(opts) {
      timeline(this, opts);
      return this;
    };
  })(window.jQuery);
}

--------------------------------------------

.timeline {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

    .timeline *, .timeline :after, .timeline :before {
        -webkit-box-sizing: inherit;
        box-sizing: inherit
    }

    .timeline:not(.timeline--horizontal):before {
        background-color: #ddd;
        bottom: 0;
        content: '';
        left: 50%;
        margin-left: -2px;
        position: absolute;
        top: 0;
        width: 4px;
        z-index: 1
    }

.timeline__wrap {
    overflow: hidden;
    position: relative;
    z-index: 2
}

.timeline__item {
    font-size: 16px;
    font-size: 1rem;
    padding: .625rem 2.5rem .625rem 0;
    position: relative;
    width: 50%;
    z-index: 2
}

    .timeline__item:after {
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 50%;
        content: '';
        height: 10px;
        position: absolute;
        right: -10px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top: 50%;
        width: 10px;
        z-index: 1
    }

    .timeline__item.animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        opacity: 0
    }

    .timeline__item.fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn
    }

.timeline__item--left {
    left: 0
}

.timeline__item--right {
    left: 50%;
    padding: .625rem 0 .625rem 2.5rem
}

    .timeline__item--right:after {
        left: -10px
    }

    .timeline__item--right .timeline__content:before {
        border-bottom: 10px solid transparent;
        border-right: 12px solid #ccc;
        border-left: none;
        border-top: 10px solid transparent;
        left: -12px
    }

    .timeline__item--right .timeline__content:after {
        border-bottom: 9px solid transparent;
        border-right: 11px solid #fff;
        border-left: none;
        border-top: 9px solid transparent;
        left: -10px
    }

.timeline__content {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #333;
    display: block;
    padding: 10px;
    position: relative;
}

    .timeline__content:after, .timeline__content:before {
        content: '';
        height: 0;
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top: 50%;
        width: 0
    }

    .timeline__content:before {
        border-bottom: 10px solid transparent;
        border-left: 12px solid #ccc;
        border-top: 10px solid transparent;
        right: -12px;
        z-index: 1
    }

    .timeline__content:after {
        border-bottom: 9px solid transparent;
        border-left: 11px solid #fff;
        border-top: 9px solid transparent;
        right: -10px;
        z-index: 2
    }

    .timeline__content h2 {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 .625rem
    }

    .timeline__content p {
        font-size: .9375rem;
        line-height: 1.5;
        margin-bottom: 10px
    }

.timeline--horizontal {
    font-size: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap
}

    .timeline--horizontal .timeline-divider {
        background-color: #ddd;
        display: block;
        height: 4px;
        left: 0px;
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 0px;
        z-index: 1
    }

    .timeline--horizontal .timeline__items {
        -webkit-transition: all .8s;
        -o-transition: all .8s;
        transition: all .8s;
        will-change: transform
    }

    .timeline--horizontal .timeline__item {
        display: inline-block;
        left: 0;
        padding: 1rem 0 1.5rem;
        position: relative;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        vertical-align: top;
        white-space: normal
    }

        .timeline--horizontal .timeline__item:after {
            left: 50%;
            right: auto;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            top: 100%
        }

        .timeline--horizontal .timeline__item .timeline__item__inner {
            display: table;
            height: 100%;
            width: 100%
        }

        .timeline--horizontal .timeline__item .timeline__content__wrap {
            display: table-cell;
            margin: 0;
            padding: 0 5px;
            vertical-align: bottom
        }

        .timeline--horizontal .timeline__item .timeline__content:before {
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 12px solid #ccc;
            left: 50%;
            right: auto;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 100%
        }

        .timeline--horizontal .timeline__item .timeline__content:after {
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #fff;
            left: 50%;
            right: auto;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 100%
        }

    .timeline--horizontal .timeline__item--bottom {
        padding: 1.5rem 0 1rem
    }

        .timeline--horizontal .timeline__item--bottom:after {
            top: 0
        }

        .timeline--horizontal .timeline__item--bottom .timeline__content__wrap {
            vertical-align: top
        }

        .timeline--horizontal .timeline__item--bottom .timeline__content:before {
            border-bottom: 12px solid #ccc;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: none;
            bottom: 100%;
            top: auto
        }

        .timeline--horizontal .timeline__item--bottom .timeline__content:after {
            border-bottom: 10px solid #fff;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: none;
            bottom: 100%;
            top: auto
        }

.timeline-nav-button {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    height: 40px;
    outline: 0;
    position: absolute;
    text-indent: -9999px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    width: 40px;
    z-index: 10
}

    .timeline-nav-button:disabled {
        opacity: .5;
        pointer-events: none
    }

    .timeline-nav-button:before {
        background-position: center center;
        background-repeat: no-repeat;
        content: '';
        display: block;
        height: 14px;
        left: 50%;
        position: absolute;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        width: 8px
    }

.timeline-nav-button--prev {
    left: 0
}

    .timeline-nav-button--prev:before {
        background-image: url(../images/arrow-left.svg)
    }

.timeline-nav-button--next {
    right: 0
}

    .timeline-nav-button--next:before {
        background-image: url(../images/arrow-right.svg)
    }

.timeline--mobile {
    padding: 0
}

    .timeline--mobile:before {
        left: 10px !important;
        margin: 0 !important
    }

    .timeline--mobile .timeline__item {
        left: 0;
        padding-left: 40px;
        padding-right: 0;
        width: 100%
    }

        .timeline--mobile .timeline__item:after {
            left: 2px;
            margin: 0
        }

        .timeline--mobile .timeline__item .timeline__content:before {
            left: -12px;
            border-bottom: 12px solid transparent;
            border-right: 12px solid #ccc;
            border-left: none;
            border-top: 12px solid transparent
        }

        .timeline--mobile .timeline__item .timeline__content:after {
            left: -10px;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #fff;
            border-left: none;
            border-top: 10px solid transparent
        }

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        top: 70px
    }

    100% {
        opacity: 1;
        top: 0
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        top: 70px
    }

    100% {
        opacity: 1;
        top: 0
    }
}

@-webkit-keyframes liftUp {
    0% {
        top: 0
    }

    100% {
        top: -15px
    }
}

@keyframes liftUp {
    0% {
        top: 0
    }

    100% {
        top: -15px
    }
}