.demos
  .device.laptop
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/laptop1s.png")
    .screen
  .device.phone
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/phone1s.png")
    .screen
View Compiled
@import compass

html
  font-size: 10px
body
  background-color: #D7E5F5
img
  vertical-align: bottom
.demos
  margin: 5rem 0
  text-align: center
  min-width: 51rem
.device
  display: inline-block
  position: relative
  margin: 0 2rem

$c1: paleturquoise
$c2: thistle
$c3: peachpuff
$c4: lavender
    
.screen
  @include background(linear-gradient(left, $c1, $c1 20%, $c2 20%, $c2 40%, $c3 40%, $c3 60%, $c4 60%, $c4 80%, $c1 80%))
  background-size: 5*100% 100%
  -webkit-animation: carousel 8s infinite linear
  animation: carousel 8s infinite linear
  position: absolute
  z-index: -1
  .laptop &
    width: 80.5%
    height: 77%
    left: 9%
    top: 6%
    animation-delay: 0.8s
  .phone &
    width: 90%
    height: 83%
    left: 6%
    top: 8.5%
    animation-name: carousel-fast


// 10% to change
@keyframes carousel
  0%
    background-position: 0 0
  15%
    background-position: 0 0
  25%
    background-position: 25% 0
  40%
    background-position: 25% 0
  50%
    background-position: 50% 0
  65%
    background-position: 50% 0
  75%
    background-position: 75% 0
  90%
    background-position: 75% 0
  100%
    background-position: 100% 0


// 5% to change
@keyframes carousel-fast
  0%
    background-position: 0 0
  20%
    background-position: 0 0
  25%
    background-position: 25% 0
  45%
    background-position: 25% 0
  50%
    background-position: 50% 0
  70%
    background-position: 50% 0
  75%
    background-position: 75% 0
  95%
    background-position: 75% 0
  100%
    background-position: 100% 0
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js