CSS Largeur de la Transition div boîte à étendre vers la gauche lorsque la souris passe sur elle

CSS Largeur de la Transition div boîte à étendre vers la gauche lorsque la souris passe sur elle

J'ai un problème intéressant, je suis en train de résoudre. J'ai ce bouton faire un don créé à l'aide de la suite de la css.

#donate-button {
    width: 211px;
    position: absolute;
    background: #FFBC2F;
    color: #FFF;
    left: 1140px;
    right:1340px;
    z-index: 30;
    top: 0px;
    transition:width 2s;
    transition:left 2s;
    transition:bottom 2s;
}

Et le css effet de transition que je veux pour cela est que le bouton faire un don du fond orangé pour étendre. Elle permettra d'élargir la vers la gauche, vers le fond à gauche, tandis que le haut et le volet de droite de la touche reste intacte dans le coin du navigateur.

J'ai essayé d'appliquer la suivante transition css hover propriété comme suit:

#donate-button:hover {
    width:33%;
    left:73%;
    bottom: 53%;
}

Le bouton faire un don seulement le redimensionnement dans le cadre du bas, mais pas le cadre de gauche et de sa largeur. Mais je suis soupçonnant je ne savais pas comment appliquer la transition retard et la durée des temps de combinaison, donc je ne pouvais pas vraiment tout à fait obtenir le bon effet...

Quelqu'un peut-il m'indiquer la bonne direction dans la façon dont je peux réaliser ce type d'effet/de l'animation? Des idées?

Laissez-moi savoir si vous avez besoin de plus d'infos.

InformationsquelleAutor awongCM | 2013-11-13
  1. 2
    transition:width 2s;
transition:left 2s;
transition:bottom 2s;

    Vous écraser la transition bien ici deux fois, de sorte que seule la dernière valeur enfin “survit”.

    Vous devez mettre toutes les trois valeurs que vous souhaitez animer en un transition propriété,

    transition:width 2s, left 2s, bottom 2s;
    • Ok. Qui permet de. Le cadre de gauche et de réglage de la largeur sont réanimés. Mais maintenant que le fond devient immédiatement élargi premier (sans transition aucune animation), avant que les deux premiers ont été animés. Donc, je dois avoir fait quelque chose de mal ici. Comment mon hover devrait fonctionner, c'est que je veux que la gauche et la largeur de l'image s'anime d'abord, puis la partie inférieure du cadre s'anime dernière en douceur progressive de l'animation. Que dois-je faire?
    • Avec des transitions vous ne pouvez commencer à tout ce qui se passe en même temps. Si vous voulez plusieurs choses qui se passent l'une après l'autre, alors vous devrez utiliser les animations CSS.
    • Ok. Merci. Je suppose que je vais avoir à la recherche de la bonne CSS animations options que j'ai besoin de faire cette effet.. sauf si vous avez des bonnes recommandations que j'ai pu prendre un coup d'oeil à?
    InformationsquelleAutor CBroe
  2. 1

    Oh j'ai trouvé la réponse.

    Je devrais faire comme ceci.

    #donate-button {
    height:80px;
    width: 211px;
    position: absolute;
    background: #FFBC2F;
    color: #FFF;
    left: 1140px;
    right:1340px;
    z-index: 30;
    top: 0px;
    transition:height 2s ease-in, width 2s ease-out, left 2s ease-out, bottom 2s ease-in;
}

#donate-button:hover {
    height:30%;
    width:53%;
    left:77%;
    bottom: 23%;
}

    J'ai oublié d'ajouter la propriété height. C'est pourquoi la hauteur a été élargie trop vite lors du survol, donc pas d'animation a été possible.

    InformationsquelleAutor awongCM