animation de personnage

by ydelmas

HTML

<div class="decors">
    <div id="perso1">★</div>
</div>
<div>
    <a href="#" id="b">animer</a>
</div>

CSS

#perso1 {
    position: absolute;
    font-size: 64px; color: #FF9900;
    transform: none; /* état final */
    left: 20px; bottom: 20px; /* é. final */
    display:none;
}
#perso1.anime{
    display: block;
    animation-name: mouvement1;
    animation-duration: 3s;
}
@keyframes mouvement1 {
  0% {
    left: 120px; bottom: 130px;
    transform: scale(0);
  }
  /* 100% { ... }*/
}
.decors {
    background-image: url(http://azrael.sha.univ-poitiers.fr/~ydelmas/2014-m1-position/500px/checkpoint.jpg), url(http://azrael.sha.univ-poitiers.fr/~ydelmas/exemples/grille.png);
    width: 280px; height:280px;
    border: 1px solid #000000;
    position: relative;
}

JavaScript

document.getElementById('b').onclick = function(){
  document.getElementById('perso1').className="anime";
};