Multiples, simultanées CSS3 transformer les transitions à des vitesses variées

Question:

Est-il même possible de faire deux différentes transformations sur un élément et d'avoir à faire la transition à des vitesses différentes?

Exemple sans se transforme (Violon):

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s linear, height 2s linear;
}

div:hover {
  width: 200px;
  height: 400px;
}

Remarquez comment il faut 1 seconde pour la largeur de l'étendre à de 200px, et 2 secondes à la hauteur de l'étendre à 400px.

Exemple avec transformations (Violon):

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear, transform 2s linear;
}

div:hover {
  transform: scale(1.5);
  transform: rotate(45deg);
}

Remarquez la manière dont il effectue la deuxième transformation. Comment pouvez-vous préciser de transformation à effectuer pour la transition? Est-ce un oubli dans la conception de feuilles de style CSS transforme? Comment puis-je aller sur la réalisation de cette?

OriginalL'auteur daveycroqet | 2014-02-27

8

Ne pense pas que vous pouvez le faire de la manière que vous essayez. Des solutions possibles serait un objet wrapper

par exemple

Plusieurs transitions

échantillon de violon ici

exemple de code (HTML)
```
<div class="wrap">
<div class="inner"></div>
</div>
```
et CSS
```
.wrap {
    width: 100px;
    height: 100px;
    transition: transform 1s linear;
}
.inner {
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
.wrap:hover {
    transform: scale(1.5);
}
.wrap:hover .inner {
    transform: rotate(45deg);
}
```
ou utiliser des animations et des images-clés comme mentionné dans la réponse de @slynagh

Vient de sortir de la note, la transformation de la propriété ne semble pas fonctionner lorsque utilisé en transition sur chrome (j'.m sur V33), mais il fonctionne très bien sur IE11, c'est tout ce que j'ai testé cela sur

OriginalL'auteur OJay
5

Vous pouvez essayer d'utiliser des animations.
```
div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  -webkit-animation: anim1 2s linear;
}

@-webkit-keyframes anim1{
  0% { -webkit-transform: scale(1) rotate(0deg); }
  50% { -webkit-transform: scale(1.5) rotate(22.5deg); }  
  100% { -webkit-transform: scale(1.5) rotate(45deg); }
}
```
Vous devez également configurer l'inverse pour que le vol stationnaire hors effet.

Vous code ne fonctionne pas en douceur. jsfiddle.net/Kbcw6/14
ajouter des préfixes vendeur
En fait de multiples animations ne fonctionnent toujours pas, parce que la deuxième animation remplace la première, et nous sommes à l'origine du problème.
Mise à jour d'origine avec seulement 1 de l'animation.

OriginalL'auteur slynagh
4

Malheureusement vous n'avez pas de tombé sur un bug dans l'implémentation de CSS.

Sur :hover la deuxième transform déclaration est tout simplement écraser la première, c'est le CSS de base. Et la même chose s'applique à la transformation de la même paramètre deux fois - les règles définies plus loin dans le CSS ou basé sur le sélecteur de poids l'emporte.

Ce serait le travail:
```
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear;
}

div:hover {
  transform: scale(1.5) rotate(45deg);
}
```
Mais pour la différence de longueur transforme l'itinéraire suggéré par @OJay - transformer l'un des paramètres sur un wrapper - est un bon moyen.

Comme suggéré par @slynagh ne fonctionnera pas comme prévu, car les animations/les transformations sur un seul élément sont effectuées de façon linéaire.

Mais nous pouvons faire @OJay échantillon de même plus propre, sans éléments supplémentaires:
```
div {
    width: 100px;
    height: 100px;
    position: relative;
    transition: transform 1s linear;
}
div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
div:hover {
    transform: scale(1.5);
}
div:hover:after {
    transform: rotate(45deg);
}
```
Bien qu'étant en mesure d'utiliser un pseudo-élément dépend du contenu de votre div.

Ne prendre note que vous êtes absent de navigateur préfixes et ce n'est pas du navigateur croix de la preuve.

OriginalL'auteur Eero Otsus

Vous devez vous connecter pour publier un commentaire.