Creating CSS3 WebKit animations

WebKit is a layout engine software component for rendering web pages in the browser. It can easily be used to give HTML elements animations and properties involving movement. In this article I will be explaining some example code I wrote below. No Imports are required to use WebKit.

You begin by declaring the Webkit and the time length -webkit-animation: rotation 1.5s linear 1; . -webkit-animation and -webkit-transform are the only WebKits I am using, although many others exist, such as -webkit-transition.

The -webkit-animation: rotation 1.5s linear 1; calls my @-webkit-keyframes rotation{ }. Note that rotation is an alias and not a WebKit method name. Rotate however, is a webkit-transform method which can be passed a value. @Keyframes are where you implement the actions your animation will make. In my example I use only 0% and 100% to have 2 states. You can of course add many more for a more complicated animation. I also use -webkit-animation-fill-mode: forwards; to make my animation run only once.

I'm sure you've probably noticed that my code is repeated two or three times, each time slightly reworded. Different browsers have a different engines for interpreting Webkits. Webkit is native to Apple's Safari and Google's Chrome and seem to work best in these environments. FireFox and Internet Explorer need slightly different syntax to work, so you'll want to test your animations on all browsers thoroughly. Note: WebKits are not supported in IE 9 or less, and some WebKits like the 3d transform are not even supported by IE today. Crazy right?

img#spin{

  -moz-border-radius: 50px/50px;

  -webkit-border-radius: 50px 50px;

  -webkit-animation: rotation 1.5s linear 1;

  -moz-animation: rotation 1.5s linear 1;

  -ms-animation: rotation 1.5s linear 1;

}

@-webkit-keyframes rotation {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}

@-moz-keyframes rotation {

  0% { -moz-transform: rotate(0deg); }

  100% { -moz-transform: rotate(360deg); }

}

@-ms-keyframes rotation {

  0% { -ms-transform: rotate(0deg); }

  100% { -ms-transform: rotate(360deg); }

}

img#move{

  right:70%;

  position: relative;

  /* Chrome, Safari, Opera */

  -webkit-animation: move 1.5s;

  animation: move 1.5s;

  -moz-animation: move 1.5s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes move {

  0%  {left:600px; top:0px;}

  100% {left:-150px; top:0px;}

}

/* Standard syntax */

@keyframes move {

  0%  {left:600px; top:0px;}

  100% {left:-150px; top:0px;}

}

/*Mozilla */

@-moz-keyframes move {

  0%  {left:600px; top:0px;}

  100% {left:-150px; top:0px;}

}

@media all and (max-width: 530px){

  img#spin{

    display: none;

  }

  img#inspire{

    display: none;

  }

  .header__logo-image{

    display:block;

  }

}