CSS3 animation effects

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Careers</a></li>
    </ul>
    <span class="btn-nav">X</span>
</nav>
    </div>
<div class="row">
  
<nav>
    <div class="nav2">
        <span><img src="https://c1.staticflickr.com/3/2500/3714055478_9ce5e45138_q.jpg"></span>
        <span><img src="https://c2.staticflickr.com/8/7159/6428026701_1dab7a350f_q.jpg"></span>
        <span><img src="https://c1.staticflickr.com/9/8343/8226647195_5241d8ef35_q.jpg"></span>
        <span><img src="https://c2.staticflickr.com/6/5474/9247850373_8219dba243_q.jpg"></span>
        <span><img src="https://c1.staticflickr.com/5/4089/5014492223_53ff6efe80_q.jpg"></span>
        <span><img src="https://c2.staticflickr.com/8/7364/10008631324_3ee8847b92_q.jpg"></span>
    </div>
    <span class="btn-nav2">X</span>
</nav>
</div>
  </body>

</html>

// Add your javascript here
$(function(){
  $("h1").animate({
    "margin-left": "100px"
  }, "slow");
  
          $(".btn-nav").click(function(){
            $("ul").toggleClass("open");
            console.log("open and close nav");
        })
        $(".btn-nav2").click(function(){
            $("div").toggleClass("open");
            console.log("open and close nav");
        })
});

/* Put your css in here */

h1 {
  color: red;
}
@-webkit-keyframes turn-around {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-moz-keyframes turn-around {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-o-keyframes turn-around {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@keyframes turn-around {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-webkit-keyframes turn-around2 {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg); } }
@-moz-keyframes turn-around2 {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg); } }
@-o-keyframes turn-around2 {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg); } }
@keyframes turn-around2 {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg); } }
@-webkit-keyframes upscale {
  from {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-moz-keyframes upscale {
  from {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-o-keyframes upscale {
  from {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@keyframes upscale {
  from {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  to {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-webkit-keyframes downscale {
  from {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }
@-moz-keyframes downscale {
  from {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }
@-o-keyframes downscale {
  from {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }
@keyframes downscale {
  from {
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  to {
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }
@-webkit-keyframes move-around {
  from {
    -moz-transform: translate(2px, 4px);
    -o-transform: translate(2px, 4px);
    -ms-transform: translate(2px, 4px);
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px); }
  to {
    -moz-transform: translate(100px, 140px);
    -o-transform: translate(100px, 140px);
    -ms-transform: translate(100px, 140px);
    -webkit-transform: translate(100px, 140px);
    transform: translate(100px, 140px); } }
@-moz-keyframes move-around {
  from {
    -moz-transform: translate(2px, 4px);
    -o-transform: translate(2px, 4px);
    -ms-transform: translate(2px, 4px);
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px); }
  to {
    -moz-transform: translate(100px, 140px);
    -o-transform: translate(100px, 140px);
    -ms-transform: translate(100px, 140px);
    -webkit-transform: translate(100px, 140px);
    transform: translate(100px, 140px); } }
@-o-keyframes move-around {
  from {
    -moz-transform: translate(2px, 4px);
    -o-transform: translate(2px, 4px);
    -ms-transform: translate(2px, 4px);
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px); }
  to {
    -moz-transform: translate(100px, 140px);
    -o-transform: translate(100px, 140px);
    -ms-transform: translate(100px, 140px);
    -webkit-transform: translate(100px, 140px);
    transform: translate(100px, 140px); } }
@keyframes move-around {
  from {
    -moz-transform: translate(2px, 4px);
    -o-transform: translate(2px, 4px);
    -ms-transform: translate(2px, 4px);
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px); }
  to {
    -moz-transform: translate(100px, 140px);
    -o-transform: translate(100px, 140px);
    -ms-transform: translate(100px, 140px);
    -webkit-transform: translate(100px, 140px);
    transform: translate(100px, 140px); } }
body {
  background: #ddd;
  font-style: bold;
  font-family: arial, verdana; }
  body #main-wrapper {
    padding: 20px;
    border: 2px solid #d33; }
  body .row {
    padding: 20px 0px;
    display: block;
    clear: both;
    width: 90%; }
  body p {
    font-size: 12px; }
  body nav ul > li {
    float: left;
    color: red;
    padding: 0px 40px;
    position: relative;
    line-height: 75px;
    display: inline-block; }
  body nav div.nav2 span {
    float: left;
    color: white;
    padding: 4px;
    margin-right: 15px;
    position: relative;
    line-height: 15px;
    display: inline-block; }
  body nav ul > li {
    opacity: 0;
    top: -15px;
    -webkit-transition: opacity 0.8s, top 0.8s;
    -moz-transition: opacity 0.8s, top 0.8s;
    transition: opacity 0.8s, top 0.8s;
    -webkit-animation-name: turn-around2;
    -moz-animation-name: turn-around2;
    animation-name: turn-around2;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s; }
    body nav ul > li:nth-child(6) {
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      transition-delay: 0s; }
    body nav ul > li:nth-child(5) {
      -webkit-transition-delay: 0.1s;
      -moz-transition-delay: 0.1s;
      transition-delay: 0.1s; }
    body nav ul > li:nth-child(4) {
      -webkit-transition-delay: 0.2s;
      -moz-transition-delay: 0.2s;
      transition-delay: 0.2s; }
    body nav ul > li:nth-child(3) {
      -webkit-transition-delay: 0.3s;
      -moz-transition-delay: 0.3s;
      transition-delay: 0.3s; }
    body nav ul > li:nth-child(2) {
      -webkit-transition-delay: 0.4s;
      -moz-transition-delay: 0.4s;
      transition-delay: 0.4s; }
    body nav ul > li:nth-child(1) {
      -webkit-transition-delay: 0.5s;
      -moz-transition-delay: 0.5s;
      transition-delay: 0.5s; }
    body nav ul > li:nth-child(0) {
      -webkit-transition-delay: 0.6s;
      -moz-transition-delay: 0.6s;
      transition-delay: 0.6s; }
  body nav div.nav2 span {
    opacity: 0;
    top: -15px;
    -webkit-transition: opacity 0.8s, top 0.8s;
    -moz-transition: opacity 0.8s, top 0.8s;
    transition: opacity 0.8s, top 0.8s;
    -webkit-animation-name: downscale;
    -moz-animation-name: downscale;
    animation-name: downscale;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s; }
    body nav div.nav2 span:nth-child(6) {
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      transition-delay: 0s; }
    body nav div.nav2 span:nth-child(5) {
      -webkit-transition-delay: 0.2s;
      -moz-transition-delay: 0.2s;
      transition-delay: 0.2s; }
    body nav div.nav2 span:nth-child(4) {
      -webkit-transition-delay: 0.4s;
      -moz-transition-delay: 0.4s;
      transition-delay: 0.4s; }
    body nav div.nav2 span:nth-child(3) {
      -webkit-transition-delay: 0.6s;
      -moz-transition-delay: 0.6s;
      transition-delay: 0.6s; }
    body nav div.nav2 span:nth-child(2) {
      -webkit-transition-delay: 0.8s;
      -moz-transition-delay: 0.8s;
      transition-delay: 0.8s; }
    body nav div.nav2 span:nth-child(1) {
      -webkit-transition-delay: 1s;
      -moz-transition-delay: 1s;
      transition-delay: 1s; }
    body nav div.nav2 span:nth-child(0) {
      -webkit-transition-delay: 1.2s;
      -moz-transition-delay: 1.2s;
      transition-delay: 1.2s; }
    body nav div.nav2 span:nth-child(6) {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      animation-delay: 0s; }
    body nav div.nav2 span:nth-child(5) {
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      animation-delay: 0.2s; }
    body nav div.nav2 span:nth-child(4) {
      -webkit-animation-delay: 0.4s;
      -moz-animation-delay: 0.4s;
      animation-delay: 0.4s; }
    body nav div.nav2 span:nth-child(3) {
      -webkit-animation-delay: 0.6s;
      -moz-animation-delay: 0.6s;
      animation-delay: 0.6s; }
    body nav div.nav2 span:nth-child(2) {
      -webkit-animation-delay: 0.8s;
      -moz-animation-delay: 0.8s;
      animation-delay: 0.8s; }
    body nav div.nav2 span:nth-child(1) {
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      animation-delay: 1s; }
    body nav div.nav2 span:nth-child(0) {
      -webkit-animation-delay: 1.2s;
      -moz-animation-delay: 1.2s;
      animation-delay: 1.2s; }
  body nav div.nav2 span {
    display: inline-block;
    background: #d44;
    height: 140px;
    width: 140px; }
    body nav div.nav2 span img {
      width: 100%; }
  body nav ul.open > li {
    opacity: 0.9;
    top: 0;
    -webkit-transition: opacity 0.8s, top 0.8s;
    -moz-transition: opacity 0.8s, top 0.8s;
    transition: opacity 0.8s, top 0.8s; }
    body nav ul.open > li:nth-child(6) {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      animation-delay: 0s; }
    body nav ul.open > li:nth-child(5) {
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      animation-delay: 0.2s; }
    body nav ul.open > li:nth-child(4) {
      -webkit-animation-delay: 0.4s;
      -moz-animation-delay: 0.4s;
      animation-delay: 0.4s; }
    body nav ul.open > li:nth-child(3) {
      -webkit-animation-delay: 0.6s;
      -moz-animation-delay: 0.6s;
      animation-delay: 0.6s; }
    body nav ul.open > li:nth-child(2) {
      -webkit-animation-delay: 0.8s;
      -moz-animation-delay: 0.8s;
      animation-delay: 0.8s; }
    body nav ul.open > li:nth-child(1) {
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      animation-delay: 1s; }
    body nav ul.open > li:nth-child(0) {
      -webkit-animation-delay: 1.2s;
      -moz-animation-delay: 1.2s;
      animation-delay: 1.2s; }
    body nav ul.open > li:nth-child(6) {
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      transition-delay: 0s; }
    body nav ul.open > li:nth-child(5) {
      -webkit-transition-delay: 0.1s;
      -moz-transition-delay: 0.1s;
      transition-delay: 0.1s; }
    body nav ul.open > li:nth-child(4) {
      -webkit-transition-delay: 0.2s;
      -moz-transition-delay: 0.2s;
      transition-delay: 0.2s; }
    body nav ul.open > li:nth-child(3) {
      -webkit-transition-delay: 0.3s;
      -moz-transition-delay: 0.3s;
      transition-delay: 0.3s; }
    body nav ul.open > li:nth-child(2) {
      -webkit-transition-delay: 0.4s;
      -moz-transition-delay: 0.4s;
      transition-delay: 0.4s; }
    body nav ul.open > li:nth-child(1) {
      -webkit-transition-delay: 0.5s;
      -moz-transition-delay: 0.5s;
      transition-delay: 0.5s; }
    body nav ul.open > li:nth-child(0) {
      -webkit-transition-delay: 0.6s;
      -moz-transition-delay: 0.6s;
      transition-delay: 0.6s; }
  body nav div.open > span {
    opacity: 0.9;
    top: 10px;
    -webkit-transition: opacity 0.8s, top 0.8s;
    -moz-transition: opacity 0.8s, top 0.8s;
    transition: opacity 0.8s, top 0.8s;
    -webkit-animation-name: upscale;
    -moz-animation-name: upscale;
    animation-name: upscale;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s; }
    body nav div.open > span:nth-child(6) {
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      animation-delay: 0s; }
    body nav div.open > span:nth-child(5) {
      -webkit-animation-delay: 0.25s;
      -moz-animation-delay: 0.25s;
      animation-delay: 0.25s; }
    body nav div.open > span:nth-child(4) {
      -webkit-animation-delay: 0.5s;
      -moz-animation-delay: 0.5s;
      animation-delay: 0.5s; }
    body nav div.open > span:nth-child(3) {
      -webkit-animation-delay: 0.75s;
      -moz-animation-delay: 0.75s;
      animation-delay: 0.75s; }
    body nav div.open > span:nth-child(2) {
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      animation-delay: 1s; }
    body nav div.open > span:nth-child(1) {
      -webkit-animation-delay: 1.25s;
      -moz-animation-delay: 1.25s;
      animation-delay: 1.25s; }
    body nav div.open > span:nth-child(0) {
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      animation-delay: 1.5s; }
    body nav div.open > span:nth-child(6) {
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      transition-delay: 0s; }
    body nav div.open > span:nth-child(5) {
      -webkit-transition-delay: 0.25s;
      -moz-transition-delay: 0.25s;
      transition-delay: 0.25s; }
    body nav div.open > span:nth-child(4) {
      -webkit-transition-delay: 0.5s;
      -moz-transition-delay: 0.5s;
      transition-delay: 0.5s; }
    body nav div.open > span:nth-child(3) {
      -webkit-transition-delay: 0.75s;
      -moz-transition-delay: 0.75s;
      transition-delay: 0.75s; }
    body nav div.open > span:nth-child(2) {
      -webkit-transition-delay: 1s;
      -moz-transition-delay: 1s;
      transition-delay: 1s; }
    body nav div.open > span:nth-child(1) {
      -webkit-transition-delay: 1.25s;
      -moz-transition-delay: 1.25s;
      transition-delay: 1.25s; }
    body nav div.open > span:nth-child(0) {
      -webkit-transition-delay: 1.5s;
      -moz-transition-delay: 1.5s;
      transition-delay: 1.5s; }
  body nav .btn-nav:hover {
    cursor: pointer; }

/*# sourceMappingURL=style-animation.css.map */