CSS3 Animations: keyframe animation 1

Keyframe animation

keyframe animation

Syntax: @keyframes <identifier> {
      [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*}
    
    

A CSS keyframe rule always begins with an identifier, which must be, like the value of an id, unique. When two keyframe rules carry the same name, only the last will be recognized. The animation can be specified in two different ways. The first is using a from...to...declaration, as in listing 1 below. In listing 1, two positions are specified and because of that the result will be the same as a transition. In the examples below we will see however, that animations have additional possibilities in store.

	@keyframes lineair_movement {
    from { left: 0; }
	to {left: 100%; }
	}
    
    
    @-webkit-keyframes lineair_movement {
    from { left: 0; }
	to {left: 100%; }
	}
Listing 1

The second way is with using percentages, as in listing2:

	
	@keyframes lineair_movement {
	0% { left: 20px; }
	20% { right: 200px; }
	80% { left: 50px; }
	100% { right: 180px; }
	}
    
    @-webkit-keyframes lineair_movement {
	0% { left: 20px; }
	20% { right: 200px; }
	80% { left: 50px; }
	100% { right: 180px; }
	}
Listing 2

When starting and/or endposition (from 0% or to 100%) are not explicitly defined in your animation, your browser will interpolate the position to the starting point or end point. You can also define a pair of keywords and values in the declaration, as shown in the example below (listing 3):

	@keyframes lineair_movement {
	20% { right: 200px; }
	80% { left: 50px; }
	to { right: 180px; }
	}
    
    @-webkit-keyframes lineair_movement {
	20% { right: 200px; }
	80% { left: 50px; }
	to { right: 180px; }
	}
    
Listing 3

The CSS keyframe animations can be invoked on e.g. a blue star (id="star"), by assigning separated CSS properties to a certain element (listing 4), or by using a shortcut notation (listing 5)

  #star {
      position: absolute;
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-bottom: 80px solid red;
	  /* For the sake of clarity we omit the vendor prefixes here/*
	  animation-name: lineair_movement 
	  animation-duration: 5s; 
	  animation-timing-function: ease-in;
  }
   
   
  .star:after {
      content:"";
      position: absolute;
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-top: 80px solid red;
      margin: 30px 0 0 -50px;
  }
Listing 4
#star { animation: lineair 5s ease-in; }
Listing 5

Example1. A moving star

We start with a simple CSS3 keyframe animation in which we create a star shape using CSS3, which will be accelerating during 5 second from left to rightof the screen

The HTML code

  <div id="star">
  </div>
 

The CSS code

@keyframes lineair_movement {
	0% { left: 20px; }
	20% { right: 200px; }
	80% { left: 50px; }
	100% { right: 180px; }
}

  #star {
      position: absolute;
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-bottom: 80px solid red;
	  /* For the sake of clarity we omit the vendor prefixes here/*
	  animation-name: lineair_movement 
	  animation-duration: 5s; 
	  animation-timing-function: ease-in;
  }
   
   
  .star:after {
      content:"";
      position: absolute;
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-top: 80px solid red;
      margin: 30px 0 0 -50px;
  }
CSS3 Animation
Image 1. CSS3 keyframe animation: from left to right, accelerated, during 5 s.

Check this example in your browser

Example2. A heartbeat by CSS3 keyframe animation

In example 1 we showed a linear movement of a shape. Unnatural to this movement was that the star after having reached its end-point was pushed back in its original position. In this example we will fix that. We will create a heart shape and next to a horizontal velocity we'll add a vertical velocity component

The HTML code

<div id="heart"></div> 

The CSS code


@keyframes "movement2topbottom" {
  0% {
  top: 200px;
  }
  5% {
  top: 400px;
  }
  15% {
  top: 0px;
  }
  25% {
  top: 300px;
  }
  35% {
  top: 100px;
  }
  50% {
  top: 250px;
  }
  60% {
  top: 150px;
  }
  65% {
  top: 225px;
  }
  70% {
  top: 175px;
  }
  75% {
  top: 210px;
  }
  80% {
  top: 190px;
  }
  83% {
  top: 205px;
  }
  86% {
  top: 195px;
  }
  87% {
  top: 200px;
  }
  100% {
  top: 200px;
  }
}

@keyframes "movement2leftright" {
  0% {
  left: 0;
  }
  100% {
  left: 800px;
  }
}

#heart {
  position: relative;
  left:0px;
  top:200px;
  animation-name: movement2leftright, movement2topbottom;
  animation-duration: 3s, 3s;
  animation-timing-function: ease-in, ease-in-out;
  animation-fill-mode: both;
}
  
#heart:before, #heart:after {
  position: absolute;
  content: "";
  left: 70px; top: 0;
  width: 70px;
  height: 115px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
  
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin :100% 100%;
}

CSS3 Animation
Image 2. CSS3 keyframe animation: from left to right, up and down.

Check this example in your browser

Example3. A bouncing ball

In this example we animate a ball (bouncing) as well as its shadow

The HTML code

<div id=wrapper> 
<div id=shadow></div> 
<div id=ball><img id="basketbal" src="../../images/css3_keyframe_ani_ball_b.png" width="100%" height="auto" alt=""/></div> 
</div> 

The CSS code


@keyframes ballbounce { 
0% {top: 0; 
    animation-timing-function: ease-in; } 
50% { top: 140px; height: 140px; 
    animation-timing-function: ease-out;} 
55% { top: 160px; height: 120px; border-radius: 50 % / 60px; 
    animation-timing-function: ease-in;} 
65% { top: 120px; height: 140px; border-radius: 50 %; 
    animation-timing-function: ease-out;} 
95% { top: 0; animation-timing-function: ease-in;} 
100% { top: 0;animation-timing-function: ease-in;} 
} 

@keyframes shadowshrink { 
0% {bottom: 0; 
    margin-left: -30px;width: 60px;height: 75px; 
    background: rgba(20, 20, 20, .1); 
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); 
    border-radius: 30px / 40px; 
    animation-timing-function: ease-in;}
50% {bottom: 30px; 
    margin-left: -10px;width: 20px;height: 5px; 
    background: rgba(20, 20, 20, .3); 
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); 
    border-radius: 20px / 20px; 
    animation-timing-function: ease-out;} 
100% {bottom: 0; 
    margin-left: -30px; 
    width: 60px; 
    height: 75px; 
    background: rgba(20, 20, 20, .1); 
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); 
    border-radius: 30px / 40px; 
    animation-timing-function: ease-in;} 
} 

#basketbal { 
    width: 140px; 
    height: 140px; 
    border-radius: 70px; 
    background: rgb(187,187,187); 
    background: linear-gradient(to bottom, 
    animation: ballbounce 1s infinite; 
} 

#shadow {
    top: 280px; 
    width: 60px; 
    height: 75px; 
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); 
    border-radius: 30px / 40px; 
    transform: scaleY(.3); 
    animation: shadowshrink 1s infinite;
} 
    
#ball,#basketbal, #shadow { 
	position: absolute; bottom: 0; 
} 

#shadow { 
	left: 65px; 
} 

#wrapper { 
    position: relative; 
    width: 200px; 
    margin: 40px auto; 
} 

CSS3 Animation
Image 3. CSS3 keyframe animation: a bouncing ball.

Check this example in your browser

Leave a comment