Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Explaination of CSS3 animation

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 442
    Comment on it

    Hello Readers!
    In this blog, I am going to explain the concept of CSS3 Animations in simple words

    CSS3 animation is used to animate the text from one CSS style to another and adding many effects to it.
    Animations consist of two building blocks i.e @keyframe and Animate Properties.
    A style describing the CSS animation and a set of keyframes that specify the start and end states of the animation's style whereas animation properties are used for Specifying the number of times an animation should be played.

    Example of Animation Properties is:

    div {
      animation-duration: 2s;
      animation-name: bounceIn;
    }

    Source Code:

    <html>
    <head>
    <style type="text/css">
    .animatedBorderBox {
      display: block;
      position: relative;
      overflow: hidden;
      margin: 12px;
      width: 500px;
      height: 200px;
      color: #0e6d82;
      font-size: 20px;
    }
    .animatedBorderBox:hover {
      color: #0e5082;
    }
    .animatedBorderBox:hover .background {
      background-position: 100px 0;
    }
    .animatedBorderBox:hover .content {
      background-color: #b2eaf7;
    }
    .background,
    .content {
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
    }
    .background {
      transition: 1200ms;
      background-color: #0e6d82;
      background-image: repeating-linear-gradient(60deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
      background-size: 30px;
    }
    .content {
      transition: 200ms;
      margin: 1px;
      line-height: 200px;
      text-align: center;
      background-color: #c9f0f9;
    }
    
    </style>
    
    </head>
    <body>
    
    <a href="javascript:;" class="animatedBorderBox">
    	<div class="background"></div>
    	<div class="content">HOVER ME</div>
    </a>
    
    </body>
    </html>

     

 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: