mardi 4 août 2015

jQuery make animation in pseudo after

I have my markup and css like this

<div class="box">Box Content</div>

css goes like this

    <style>
    @-webkit-keyframes widthresize {
        0% {
            width:10px
        }
        50% {
            width:50px
        }
        100% {
            width:100px
        }
    }
@-moz-keyframes widthresize {
        0% {
            width:0%
        }
        50% {
            width:50%
        }
        100% {
            width:100%
        }
}
@-ms-keyframes widthresize {
        0% {
            width:0%
        }
        50% {
            width:50%
        }
        100% {
            width:100%
        }
}
@keyframes widthresize {
        0% {
            width:0%
        }
        50% {
            width:50%
        }
        100% {
            width:100%
        }
    }   
    body {
        background-color: #333;
    }
    .box {
        color: #FFF;
    }
    .box::after {
        background: #FFF;
        content: '';
        position: relative;
        width: 0;
        height: 1px;
        left: 0;
        display: block;
        clear: both;
    }
    .widthanimation::after {
      -webkit-animation-name: widthresize;
      -moz-animation-name: widthresize;
      -o-animation-name: widthresize;
      -ms-animation-name: widthresize;
      animation-name: widthresize;
      animation-timing-function: ease;
      -webkit-animation-timing-function: ease;
      -moz-animation-timing-function: ease;
      -o-animation-timing-function: ease;
    }

    </style>

and the jQuery like this

jQuery(document).ready(function($) {
    $('div.box').addClass('widthanimation');
});

I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire