les animations css3, fondu comme déplacez-le vers le bas?

Je suis en train d'apprendre comment faire des animations css3. Comment pourrais-je faire de cette zone de fondu comme il se déplace vers le bas?

Exemple: http://jsfiddle.net/RtWTN/1/

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 3s ease-out forwards;
  animation-iteration-count: 3;
}

@keyframes mymove
{ 
  from { top: 0px;}
  to { top: 200px;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

OriginalL'auteur Ned | 2013-06-26

  1. 4

    Vous pouvez ajouter plusieurs règles pour l'animation d'images clés.

    {
from {top:0px; opacity: 0;}
to {top:200px; opacity: 1;}
}

    http://jsfiddle.net/T2DnG/1/

    Merci, comment faire pour garder la case en bas après l'animation, au lieu de sauter en arrière, vers le haut?
    les attaquants;

    OriginalL'auteur Explosion Pills

  2. 1

    De l'animation de la haut propriété est mauvais pour les performances du navigateur. Utilisez simplement transform: translateY(<value>), cette solution est de loin la plus performante.

    @keyframes mymove
{
  from {transform: translateY(0); opacity: 0;}
  to { transform: translateY(200px); opacity: 1;}
}

    Les navigateurs sont optimisés pour les transformations et l'opacité

    OriginalL'auteur Teague Ashcraft