My First CSS Animation

Baby steps, Sandy! Baby steps.

I drew a vector chicken body in Illustrator, exported the SVG code, and added it to my HTML. Now I use CSS to keyframes to add movement. It slides to the left for 3 seconds. I know it’s not impressive yet, but I have to start somewhere!

 /*Sandys 1st animation of chicken*/
@keyframes chickenmove {
    0% {
      transform: translateX(150px);
    }
    34% {
      transform: translateX(20px);
    }
    37% {
      transform: translateX(150px);
    }
    100% {
      transform: translateX(150px);
    }
  }

  #chicken {
    width:200px;
    position:absolute;
    bottom:0;
    right:150px;
    transform: translateX(150px);
    animation: chickenmove 2s 3s ease;
  }