While applying animation to an object in MS Powerpoint, you might have picked some predefined entrance effects like bounce, flash, shake, wobble, etc.

We can apply these effects to our HTML elements in webpages as well. These can be implemented by CSS 3 Animation property.

Below are some entrance examples.

1. Bounce Effect

   @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

   40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { animation-name: bounce; }

2. Pulse Effect

   @keyframes pulse { 0% { transform: scale(1); }

   50% { transform: scale(1.1); }

   100% { transform: scale(1); } }

   .pulse { animation-name: pulse; }

3. Swing Effect

   @keyframes swing { 20% {
   transform: rotate(15deg); }

   40% { transform: rotate(-10deg); }

   60% { transform: rotate(5deg); }

   80% { transform: rotate(-5deg); }

   100% { transform: rotate(0deg); } }

   .swing { transform-origin: top center; animation-name: swing; }

4. Wobble Effect

   @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); }

   30% { transform: translateX(20%) rotate(3deg); }

   45% { transform: translateX(-15%) rotate(-3deg); }

   60% { transform: translateX(10%) rotate(2deg); }

   75% { transform: translateX(-5%) rotate(-1deg); }

   100% { transform: translateX(0%); } }

   .wobble { animation-name: wobble; }

Note: In order to execute above animation in Google Chrome & Safari, you have to put suffix -webkit- before each CSS3 property used for animation.