Animating with Top/Left

In this example below you will see how to do a Animating with Top/Left with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by paulirish, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright paulirish ©
  • HTML
  • CSS
  • JavaScript
    <h1>Animate with Top/Left</h1>

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

/*Downloaded from https://www.codeseek.co/paulirish/animating-with-topleft-nkwKs */
    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% {
     top: 200px;
     left: 200px;
  }
}



.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;
}​


/*Downloaded from https://www.codeseek.co/paulirish/animating-with-topleft-nkwKs */
    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')


Comments