Je suis nouveau dans ce domaine de codage, je pense que mon problème est simple pour les personnes expérimentées comme vous tous.J'essaie d'animer l'image qui se trouve à l'intérieur du bouton.Lorsque je clique sur le bouton, j'ai besoin que l'image soit tournée à 360 °. Je ne sais pas ce que je fais de mal ici, c'est mon code HTML et CSS.

.syncRotate {
  -webkit-transition: 500ms ease all !important;
  -moz-transition: 500ms ease all !important;
  -o-transition: 500ms ease all !important;
  transition: 500ms ease all !important;
  -webkit-transform: rotate(360deg) !important;
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="../../assets/images/icons/sync.svg" alt="Sync">
</button>
5
Musheer Aiman 10 août 2017 à 17:41

2 réponses

Meilleure réponse

Cela fonctionnera pour vous si vous ne souhaitez utiliser que transition.!

.syncRotate {
  -webkit-transition: 500ms ease all;
  -moz-transition: 500ms ease all;
  -o-transition: 500ms ease all;
  transition: 500ms ease all;
  -webkit-transform: rotate(0deg);
}

.syncRotate:active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>

SI vous voulez qu'il fasse une belle animation en utilisant animation CSS

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

.syncRotate {
  -webkit-transform: rotate(0deg);
}

.syncRotate:active {
  animation: rotation 500ms ease-in-out forwards;
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>

En changeant 500 ms en 400 ms environ, nous pouvons le rendre rapide et en le modifiant plus haut, l'animation et la transition seront plus lentes, par exemple 900 ms ou 1 s .

Remarque: étant donné que nous n'utilisons que du CSS , l'animation et la transition ne durent que lorsque l'utilisateur clique sur le bouton. Donc, dans votre cas, les deux seront les mêmes.

3
weBBer 10 août 2017 à 16:49

Rotation à 360 degrés sans clic

.syncRotate {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.syncRotate:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>
2
Dom 10 août 2017 à 16:11