OS X Dock

index.html

.dock
  ul
    li.icon
      img src='https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg'
    li.icon.running.bouncing
      img src='https://upload.wikimedia.org/wikipedia/commons/7/73/Ruby_logo.svg'
    li.icon
      img src='https://upload.wikimedia.org/wikipedia/en/e/e9/Ruby_on_Rails.svg'
    li.icon.running
      img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Swift_logo.svg'
    li.icon
      img src='https://upload.wikimedia.org/wikipedia/en/d/d5/Rust_programming_language_black_logo.svg'
    li.icon
      img src='https://upload.wikimedia.org/wikipedia/commons/1/1c/Haskell-Logo.svg'
    li.icon
      img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Phalcon_logo.png/209px-Phalcon_logo.png'

OS X Dock.markdown

OS X Dock

OS X Dock with bouncing animation made with pure CSS

A Pen by James Shih on CodePen.

License.

style.css

body {
  background: linear-gradient(45deg, #f06, #ff0);
}

.dock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

  ul {
    display: inline-block;
    margin: 0;
    padding: 0 0 5px 0;
    list-style-type: none;
    background: rgba(255,255,255,.5);
    border-radius: 5px 5px 0 0;
    
    .icon {
      display: inline-block;
      position: relative;
      margin: 10px;
      
      img {
        width: 50px;
        height: 50px;
      }
      
      &.bouncing img {
        animation: bounce ease-out 2s infinite;
        @keyframes bounce {
          0% { transform: translateY(0) }
          10% { transform: translateY(-80px) }
          20% { transform: translateY(0) }
          30% { transform: translateY(-40px) }
          40% { transform: translateY(0) }
        }
      }
      
      &.running::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        margin-left: -2px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #333;
      }
    }
  }
}