animation css3

animation css3

by DoubleYo

HTML

<a href="#">anim</a>

<div id="bloc_bleu"></div>
<div id="bloc_rouge"></div>
<div id="bloc_vert"></div>

CSS

div {
    width: 100px;
    height: 100px;
    margin: 5px;
    position: absolute;
    top:40px;
}

#bloc_bleu {
    background-color: blue;
    left: 110px;
}

#bloc_rouge {
    background-color: red;
    left: 110px;
    top: 150px;
}
#bloc_vert {
    background-color: green;
    left: 500px;
    opacity: .1;
    -webkit-transform:rotate(0deg);
}

#bloc_bleu.anim {
    -webkit-transition: left 1s ease;
    -moz-transition: left 1s ease;
    -o-transition: left 1s ease;
    transition: left 1s ease;
    left: 0;
}

#bloc_rouge.anim {
    -webkit-transition: top 1s ease 1s;
    -moz-transition: top 1s ease 1s;
    -o-transition: top 1s ease 1s;
    transition: top 1s ease 1s;
    top: 40px;
}
#bloc_vert.anim {
    -webkit-transition: left 1s ease 1s, opacity 1s linear 1s, -webkit-transform 5s linear 2s;
    -moz-transition: left 1s ease 1s, opacity 1s linear 1s;
    -o-transition: left 1s ease 1s, opacity 1s linear 1s;
    transition: left 1s ease 1s, opacity 1s linear 1s;
    left: 220px;
    opacity: 1;
    -webkit-transform:rotate(1080deg);
}

JavaScript

$('a').click(function() {
    $('#bloc_rouge').addClass('anim');
    $('#bloc_bleu').addClass('anim');
    $('#bloc_vert').addClass('anim');
});