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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 512
    Comment on it

    An animation takes place when the style of an element changes.
    To use the animation by CSS3 we have to define some keyframes. These @keyframes will be having the styles of an element at particular time.

    For the CSS3 animation we need to specify the animation-name, animation-duration, animation-delay, animation-duration, animation-iteration-count etc.

    Below is the example of "loading" using CSS3 keyframes:-

    HTML-

    <body>
     <div class="content">
          <h3>CSS3 Loading animations</h3>
            <div class="container">
                <div class="loading_1">
                    <p>Loading 1</p>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
    
            <div class="container">
                <div class="loading_2">
                    <p>Loading 2</p>
                    <div class="line"></div>
                </div>
            </div>
    
    
    
             <div class="container">
                <div class="loading_3">
                    <p>Loading 3</p>
                    <div class="ring">
                        <div class="ball_container">
                            <div class="ring1"></div>
                        </div>
                    </div>
                </div>
            </div>
      </div>
    </body>

     

    CSS-

    body {
        margin: 0 auto;
        padding: 20px;
        max-width: 470px;
        font-family: 'Open Sans',sans-serif;
        font-weight: 400;
        color: #777;
        background-color: #f7f7f7;
    }
    .content {
        padding: 15px;
        overflow: hidden;
        background-color: #999966;
    }
    h1 {
        padding-bottom: 15px;
        border-bottom: 1px solid #d8d8d8;
        font-weight: 600;
    }
    h3 {
      padding-bottom: 20px;
      color: #000;
    }
    p {
        margin: 0;
        padding: 10px 0;
        color: #000;
    }
    .container{
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 10px 10px 0;
        padding: 20px 20px 20px;
        border-radius: 5px;
        text-align: center;
        background-color: #c65353;
    }
    .container p {padding: 0 0 20px;}
    .container:last-child {margin-right: 0;}
    .line {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 15px;
        background-color: #33001a;
    }
    .ring {
        position: relative;
        width: 45px;
        height: 45px;
        margin: 0 auto;
        border: 4px solid #33001a;
        border-radius: 100%;
    }
    .ball_container {
        position: absolute;
        width: 12px;
        height: 45px;
        left: 17px;
        top: 0px;
    }
    .ring1 {
        position: absolute;
        top: -11px;
        left: 0;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        background: #33001a;
    }
    .loading_1 .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
    .loading_1 .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
    .loading_1 .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}
    .loading_3 .ball_container {animation: loadingC 1.3s linear infinite;}
    @keyframes loadingA {
        0 {height: 15px;}
        50% {height: 35px;}
        100% {height: 15px;}
    }
    .loading_2 .line {animation: loadingB 1.5s cubic-bezier(.17,.37,.43,.67) infinite;}
    @keyframes loadingB {
        0% {width: 15px;}
        50% {width: 35px; padding: 4px;}
        100% {width: 15px;}
    }
    @keyframes loadingC {
        0 {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }

     

    Here is the demo of above example:-

    https://jsfiddle.net/vz29wd9j/

 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: