CSS Archaeology

Animating with CSS

One of the nice effect that I think CSS can do is animation. There are several ways to create an animation in CSS. You can create animation with CSS animation property, without Javascript or without use of Flash. You can use the animation property on other CSS elements like animating colors, forms and positions.

The first way to create an animation is by @keyframes rules.
Animation is created when several frames of images are put together. There are keyframes which are the mainframes holding changes in the animation, and there are in-between frames that make the transition look smooth. 

The CSS @keyframes rules holds the information about the animation. The position of a keyframe is set by percentages ranging from 0% to 100%.
0% represents the beginning, 50% the middle part, and 100% the ending of an animation, But it can also can present the position value from and to instead of 0% and 100%.

---

The first step in creating a simple animation in the @keyframe rule :

1. add animation properties to an element consisting of:
   Animation-name: //this is the name you are giving to your animation e.g. bounceBall or rainbowColors
   Animation-duration:  // this is the lenght of your animation declared in sec e.g. 3s (seconds) in ms(millieseconds)
   Animation-iteration-count: // sets up how many times the animation repeats  2 or infinitive

e.g.  animation: myAnimation 5s infinite;

       2. add the @keyframes  myAnimation  including the name you set for your animation

Here is an example:

 

---

Here are more animation properties, that can be defined.

• animation-timing-function: acceleration of the animation ease or linear.ease, ease-out, ease-in, ease-in-out, linear,cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
• animation-delay: how long it takes before the animation starts
• animation-fill-mode: the style of the animation while it’s not animating e.g. if it is paused in the end position than resets to starting position when animation starts or by default is is paused in the starting position and after the animation is finished it returns to the starting point forwards ends with the animation in the endframe , backwards ends with the starting keyframe , both, none
• animation-direction: set the direction of the animation if it goes normal or alternate
• animation-play-state:  pause or play when the animation loads.

 

Here are examples of css animation running in the browser:

https://codepen.io/scoooooooby/pen/pecdI

https://codepen.io/yancy/full/gBLLxz

---

Another cool effect to create Animation in CSS  is called Transformation or Transition. We add a transition timing function to the transformation in order to create an animation. Similar to @keyframe rule it also requires a duration called the transisiton-duration and optional a  transition-delay.

The transition-timing-function sets the property of how the transition timing happens if it is a constant more or the transition is fast at the beginning and slows down at the end. The different values are:

• default,
• linear,
• ease-in,
• ease-out,
• ease-in out,
• bezier
• step

Here is a great website explaining the differences on the transformation:

 

IMPORTANT!!

But different browsers supports different transition and transformation and to support most of them it is better to use all styles which are called:

 transition

• -webkit-transition
• -moz-transition
• transition

 transforms:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Here is an example of transition-timing-function being used:

 

This is my favorite websites using HTML and CSS animation with the help of the website toolkit. The designers goal was to push the possibilities of   animating with polygons, entertaining the user and educating them at the same time. The transitions from one polygon animal to another is amazing,

 

http://www.species-in-pieces.com/

Here is the code with the transition  being used on the website .