.number-one{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 200, 0);
    animation-name: number-one;
    animation-duration: 3s;
    text-align: center;
    align-items: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: white;
    margin-left: 655px;
    transform: skewY(35deg);
  }
  
  @keyframes number-one {
    from {background-color: rgb(255, 200, 0)}
    to {background-color: rgb(255, 0, 187);}
  }

  h1 {
  text-align: center;
  }

  .number-two{
      width: 100px;
      height: 100px;
      background-color: rgb(255, 200, 0);
      animation-name: "number-two";
      animation-duration: 4s;
      text-align: center;
      align-items: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 30px;
      color: white;
      margin-left: 655px;
  }

  @keyframes number-two {
      0%   {background-color: rgb(255, 200, 0);}
      25%  {background-color: rgb(170, 0, 255);}
      50%  {background-color: blue;}
      100% {background-color: rgb(249, 0, 220);}
  }

  .number-three {
      width: 100px;
      height: 100px;
      background-color:rgb(255, 200, 0);
      position: relative;
      animation-name: "number-three";
      animation-duration: 4s;
      text-align: center;
      align-items: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 30px;
      color: white;
      margin-left: 655px;
  }

  @keyframes number-three {
      0%   {background-color:rgb(255, 200, 0); left:0px; top:0px;}
      25%  {background-color:rgb(170, 0, 255); left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:rgb(109, 0, 128); left:0px; top:200px;}
      100% {background-color rgb(249, 0, 220); left:0px; top:0px;}
  }

  .number-four-delay {
      width: 100px;
      height: 100px;
      background-color: rgb(255, 200, 0);
      position: relative;
      animation-name: "number-four-delay";
      animation-duration: 4s;
      animation-delay: 2s;
      text-align: center;
      align-items: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 30px;
      color: white;
      margin-left: 655px;
  }

  @keyframes number-four-delay {
      0%   {background-color:rgb(255, 200, 0)}
      25%  {background-color:rgb(170, 0, 255); left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:rgb(109, 0, 128); left:0px; top:200px;}
      100% {background-color:rgb(249, 0, 220); left:0px; top:0px;}
  }

  .number-five-negative-delay {
      width: 100px;
      height: 100px;
      background-color:rgb(255, 200, 0);
      position: relative;
      animation-name: "number-five-negative-delay";
      animation-duration: 10s;
      animation-delay: -2s;
      text-align: center;
      align-items: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 30px;
      color: white;
      margin-left: 655px;
  }

  @keyframes number-five-negative-delay  {
      0%   {background-color:rgb(255, 200, 0); left:0px; top:0px;}
      25%  {background-color:rgb(170, 0, 255); left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:rgb(109, 0, 128); left:0px; top:200px;}
      100% {background-color:rgb(249, 0, 220); left:0px; top:0px;}
  }

  .number-six-aic {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 200, 0);
  position: relative;
  animation-name: "number-six-aic";
  animation-duration: 4s;
  animation-iteration-count: 2;
  /*animation-direction: alternate;*/
  /*animation-direction: alternate-reverse;*/
  text-align: center;
  align-items: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 30px;
  color: white;
  margin-left: 655px;
  }   

  @keyframes number-six-aic {
      0%   {background-color:rgb(255, 200, 0); left:0px; top:0px;}
      25%  {background-color:rgb(170, 0, 255); left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:rgb(109, 0, 128); left:0px; top:200px;}
      100% {background-color:rgb(249, 0, 220); left:0px; top:0px;}
      }

      .espaciador {
      height: 240px; 
      }

      atf {
      width: 100px;
      height: 50px;
      background-color: rgb(255, 200, 0);
      font-weight: bold;
      position: relative;
      animation: mymove 5s;
      animation-fill-mode: forwards;
      text-align: center;
      align-items: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 30px;
      color: white;
      margin-left: 0px;
      margin-top: 500px;
  }

      #div1 {animation-timing-function: linear;}
      #div2 {animation-timing-function: ease;}
      #div3 {animation-timing-function: ease-in;}
      #div4 {animation-timing-function: ease-out;}
      #div5 {animation-timing-function: ease-in-out;}

  @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
  }

  .shorthand-animation-property {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
  text-align: center;
      align-items: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 30px;
      color: white;
      margin-left: 655px;
      margin-top: 5px;
      transform: rotate(40deg);
  }

  @keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
  }