css3 animation/transition/transform: Comment faire une image de grandir?

Je veux faire de mon image de croître à 1500px en hauteur (et j'espère que la largeur serait juste automatiquement re-taille lui-même, sinon, j'aurais facilement mis trop)

J'ai été en utilisant jquery .animate (), mais ses juste trop instable à mon goût...
Je sais que je peux utiliser le :

-webkit-transform: scale(2);

Mais je veux qu'il soit d'une taille spécifique.. pas seulement le double ou le triple de la taille de l'image.

Toute aide?

Grâce

  • jQuery est trop agitée? Son joli beaucoup la manière la plus rapide, vous pouvez obtenir avec javascript. Quel navigateur avez-vous besoin de ce travail et quel navigateur êtes-vous tester dans?
InformationsquelleAutor Jenn | 2010-09-01
  1. 16

    Vous êtes à la recherche pour le -webkit-transition propriété pour webkit. Qui vous permet de spécifier séparément les deux règles CSS (par exemple, deux classes), puis le type de transition à appliquer lors de la commutation de ces règles.

    Dans ce cas, vous pouvez simplement définir le début et la fin des hauteurs (je l'ai fait à la fois la hauteur et la largeur dans l'exemple ci-dessous) ainsi que la définition de -webkit-transition-property pour les propriétés que vous souhaitez transition, et -webkit-transition-duration pour la durée:

    div {
    height: 200px;
    width: 200px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

div:hover {
    width: 500px;
    height: 500px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

    Testé dans Safari. L'équipe a également affiché un très bon article sur les CSS Effets Visuels.

    Cependant, je vous recommande aussi d'avoir un autre regard sur jQuery, que les plus CSS3 trucs de ne pas être entièrement compatible avec les versions d'IE.

    InformationsquelleAutor Christopher Scott