CodePen Embed - Animating with Translate

<h1>Animate with Translate</h1>

<div id="animate" class=macbook></div>

h1 {  padding: 90px; } 
body {
 
  color:white;
  
  background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300; 
background-size: 100px 100px;
}

#animate {
  position: absolute;
  top: 100px;
  left: 100px;
  
  
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(100px, 100px);
  }
}


.macbook {
    background-color: #082746;
    background-image: linear-gradient(70deg, transparent 67%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,100%,.025)),
                      linear-gradient(#ddd 11px, transparent 11px),
                      linear-gradient(#132d4e, #4f7d90);
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 1px 1px 1px #000,
                inset 0 0 0 9px #111,
                0 0 0 1px #ccc,
                0 0 1px 2px hsla(0,0%,0%,.4),
                0 0 50px hsla(0,0%,0%,.3), 
    0 0 100px hsla(0,0%,0%,.5), 
    0 0 200px hsla(0,0%,0%,.5);
    height: 100px;
    display: block;
    left: 50%;
    margin: -50px -75px;
    position: absolute;
    top: 50%;
    width: 150px;
}
.macbook:after {
    background-color: #ddd;
    background-image: linear-gradient(left, hsla(0,0%,0%,.3), hsla(0,0%,100%,.4) 2%, hsla(0,0%,100%,.1) 5%, hsla(0,0%,0%,.2) 95%, hsla(0,0%,100%,.2) 98%, hsla(0,0%,0%,.4));
    border-bottom: 3px solid hsla(0,0%,40%,.75);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 3px 7px hsla(0,0%,0%,.1);
    content: '';
    height: 7px;
    left: -22px;
    position: absolute;
    right: -22px;
    top: 100%;
}
.macbook:before {
    background-color: #222;
    border-radius: 100%;
    box-shadow: inset 1px 1px 0 hsla(0,0%,100%,.1),
                -13px 96px 0 -1px #888,
                -13px 97px 0 -1px #888,
                -11px 97px 0 #888,
                -9px 97px 0 #888,
                -7px 97px 0 #888,
                -5px 97px 0 #888,
                -3px 97px 0 #888,
                -1px 97px 0 #888,
                1px 97px 0 #888,
                3px 97px 0 #888,
                5px 97px 0 #888,
                7px 97px 0 #888,
                9px 97px 0 #888,
                11px 97px 0 #888,
                13px 97px 0 -1px #888,
                13px 96px 0 -1px #888,
                80px 99px 0 -1px #666,
                81px 99px 0 -1px #666,
                82px 99px 0 -1px #666,
                83px 99px 0 -1px #666,
                84px 99px 0 -1px #666,
                85px 99px 0 -1px #666;
    content: '';
    height: 3px;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 3px;
    width: 3px;
    z-index: 1;
}

var machines = 10;

$('<button></button')
  .text('clear')
  .click(function moar(){
    $('[id=animate]').slice(1).remove();
  })
  .prependTo('body')

  
$('<button></button')
  .text('add ' + machines + ' more macbooks')
  .click(function moar(){
    $('#animate').clone().insertAfter('#animate');
    if (machines-- > 0) setTimeout(moar, 15);
  })
  .prependTo('body')

This Pen is owned by Paul Irish on CodePen. It is a fork of this Pen.

See more by @paulirish on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript