Dev Faq
1
votes

Est-il possible d'utiliser CSS translateX (100%) pour créer une animation en mouvement?

Dans mon animation, j'aime utiliser la transformation. Il est également possible de le créer avec la propriété left / right . Mais j'aime utiliser la transformation. Je dois déplacer la freeze-loading-bar de 100% vers la droite et cela devrait être une boucle infinie.

Comment puis-je déplacer la barre de chargement vers la droite à 100% / complètement? 

<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;

  padding: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  
  /** disual purpose **/
  /** overflow: hidden; **/
  
}

.freeze-loading-bar {
  position: absolute;
  left: 0;
  width: 80px;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(100%);
    }
}

2 commentaires

Quel problème spécifique rencontrez-vous?

Je veux déplacer la barre vers la droite de 100%

5 Réponses :

3
votes

En termes de réactivité, utilisez % , et non px , car le calcul est simple,

Si la largeur de la barre est 20% (1 / 5 de celui des parents)
translateX de -100% à 500% (100% * 5 ) 

<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 0 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  position: relative;
  top: 0;
  width: 20%;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(500%);
  }
}

0 commentaires
-5
votes

Bien sûr, vous devez ajouter du javascript si vous avez besoin d'animations fluides. Mais CSS fonctionne bien aussi. 

    @keyframes freeze-loading-bar {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

Cela pourrait résoudre le problème que vous rencontrez.

2 commentaires

Connaissez-vous les animations CSS ? C'est ce sur quoi porte cette question.

100% est relatif au Rect de l'élément traduit, et non à une largeur parent.

4
votes

Gardez l'élément pleine largeur (en utilisant gauche / droite) puis utilisez un dégradé pour la coloration afin de ne colorer qu'une partie de celui-ci. Vous pouvez maintenant vous fier à translateX (100%) quelle que soit la largeur de la coloration: 

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>
.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  right: 0;
  width:calc(100% + var(--w));
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  to  {
     transform: translateX(100%);
  }
}

Un autre type d'animation: 

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>
.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
  animation: freeze-loading-bar 2s linear infinite;
  transform: translateX(calc(-1*var(--w)));
}

@keyframes freeze-loading-bar {
  to  {
     transform: translateX(100%);
  }
}

Autre syntaxe: 

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>
.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px; /* the width of coloration */

  position: absolute;
  left: 0;
  right: var(--w);
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
   animation: freeze-loading-bar 1s linear infinite alternate;
}

@keyframes freeze-loading-bar {
  to {
    transform: translateX(100%);
  }
}

Et encore une autre: 

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>
.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  left: calc(-1*var(--w));
  right: 0;
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
   animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  to {
    transform: translateX(100%);
  }
}

5 commentaires

Bien joué, j'allais presque commenter cet exemple, tu m'as battu, bravo.

C'est hors de la boîte! [S'il vous plaît monsieur, donnez-moi quelques conseils sur la façon dont je peux être un bon animateur sur CSS :(]

@ Md.Tahazzot pratique, pratique et pratique plus;) C'est le seul conseil que je puisse vous donner pour devenir meilleur. Soyez également patient, cela peut vous prendre beaucoup de temps pour en savoir plus

IE ne supporte pas le var (), je respectais IE mais maintenant elle fait des erreurs encore et encore. Presque tous les concepteurs Web sont mécontents de cela.

@ Md.Tahazzot var () n'est pas obligatoire pour que la solution fonctionne. Je l'ai simplement utilisé pour avoir un code simplifié et montrer qu'il est dynamique. Placez simplement la valeur souhaitée sans variable

-4
votes 
.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;  // <== LOOK HERE
  
  /** disual purpose **/
  /** overflow: hidden; **/
  
}

.freeze-loading-bar {
  position: absolute;
  left: 0; // <= LOOK HERE 
  width: 80px;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}


@keyframes freeze-loading-bar {
    from {
        left: -80px; // <== HERE
    }

    to {
        left: calc(100% + 80px); // AND HERE
    }
}
2 commentaires

Il est également possible de le faire avec la propriété gauche / droite. Mais j'aime utiliser la transformation.

Les propriétés left et right ne sont pas accélérées par GPU. Animez uniquement les propriétés qui n'entraîneront pas d'animations maladroites. transform en fait partie.

-1
votes

Votre exemple ne fonctionne pas tout à fait, car le pourcentage dans la transformation est relatif à la largeur de la barre de chargement, c'est-à-dire 100% de 80px au lieu de 100% du parent (qui a la longueur de barre de chargement prévue).

Pour résoudre ce problème, vous pouvez utiliser l'élément :: after pour rendre la barre mobile pleine largeur, mais n'afficher qu'une partie de la barre mobile: 

<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;

  padding: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  display:block;
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  
  /** disual purpose **/
  overflow: hidden;
  
}

.freeze-loading-bar {
  --loading-bar-width: 80px;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  animation: freeze-loading-bar 2s linear infinite;
}

.freeze-loading-bar::after {
  content: '';
  display: block;
  --loading-bar-width: 80px;
  position: absolute;
  left: 0;
  width: var(--loading-bar-width);
  height: 100%;
  background-color: rgb(0, 132, 255);
  
}

@keyframes freeze-loading-bar {
    from {
        transform: translateX(calc(var(--loading-bar-width) * -1));
    }

    to {
        transform: translateX(100%);
    }
}

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO