Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 : Entrance Effects Examples

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 204
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: