28172 sujets

CSS et mise en forme, CSS3

Simplification Animation

Hello la Alsateam,

Petite question du jour (enfin du soir plutôt) Smiley lol

J'ai réussi à faire une petite animation comme je voulais, c'est à dire 4 arcs de cercle qui tournent. C'est pour faire patienter sur une des mes pages qui nécessite du temps de chargement ( un groooos ajax ), ça dure entre 2 et 5s.

Donc visuellement ça me plait assez ( oui je ne suis pas difficile Smiley biggrin ), par contre ça me parait bien lourd niveau code ...

https://codepen.io/stryk/pen/VwKpjEJ

Si quelqu'un a une idée pour alléger tout ça et garder sensiblement le même rendu je suis preneur de tout explication.

Bonne soirée et merci de votre aide.
Modérateur
Salut !

Voila une proposition pour réduire un peu le nombre de div et de class. J'ai pas été jusqu'à utiliser les ::before et ::after je suis pas fan.
<div class="circle" id="circle1"></div>
<div class="circle" id="circle2"></div>
<div class="circle" id="circle3"></div>
<div class="circle" id="circle4"></div>

.circle {
	position: fixed;
	top: 0;
  bottom: 0;
	left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

#circle1 {
	border: solid 5px #FE8702;
	border-top-color: transparent;
	height: 70px;
	width: 70px;
  transform: rotate(34deg);
	animation: rotate 2s infinite linear;
}

#circle2 {
	border: solid 5px #F4662C;
	border-top-color: transparent;
	height: 100px;
	width: 100px;
  transform: rotate(117deg);
	animation: rotate 5s infinite linear;
}

#circle3 {
	border: solid 5px #EC494F;
	border-top-color: transparent;
	height: 130px;
	width: 130px;
  transform: rotate(241deg);
	animation: rotate 3s infinite linear;
}

#circle4 {
	border: solid 5px #E52F6F;
	border-top-color: transparent;
	height: 160px;
	width: 160px;
  transform: rotate(301deg);
	animation: rotate 6s infinite linear;
}

@keyframes rotate {
  0%    { transform: rotate(0deg);  }
	100%  { transform: rotate(360deg);  }
}


https://codepen.io/undless/pen/zYKZoxG

Bonne nuit !
Modifié par _laurent (15 Dec 2020 - 02:01)
Modérateur
Bonjour,

une autre approche avec des balises et animations imbriquées. avec un delay negatif pour le decalage de départ. 
<div class="fixed">
  <b class="loader that rotate"><b><b><b></b></b></b></b>
</div>

css
.fixed {position:fixed;width:100%;  display: flex;  height: 100%;  background: #100E17;}
.rotate {margin:auto;  height: 165px;  width: 165px;  color: #e52f6f;  animation-duration: 6s;}
b {
  display: grid;
  padding: 10px; 
  color: #ec494f;
  border: 5px solid;
  border-radius: 50%;
  box-sizing: border-box;
  border-bottom-color: transparent;
  animation: 6s -2s rotate  linear infinite; 
}
.rotate b {  animation-duration: 7s;  }
.rotate b b {  color: #f4662c;  animation-duration: 11s;animation-direction:reverse}/* sert ici a ralentir l'animation imbriquée */
.rotate b b b {  color: #fe8702;  animation-duration: 3s;animation-direction:normal}

@keyframes rotate {
  to {transform: rotate(360deg); } 
}


C'est moins intuitif pour le réglage.
https://codepen.io/gc-nomade/pen/BaLWdKW
Meilleure solution
Modérateur
gcyrillus a écrit :
une autre approche avec des balises et animations imbriquées. avec un delay negatif pour le decalage de départ.

Ah j'aime le fait de les imbriquer pour ne pas a avoir a set la taille a chaque fois !

class="loader that rotate"

Smiley lol ca aussi je kiffe

Je comprenais pas le coup de la color au lieu de border color et là :
mozilla a écrit :
La valeur par défaut qui sera utilisée sera la valeur de la propriété color de l'élément

https://developer.mozilla.org/fr/docs/Web/CSS/border
ooooook https://media.giphy.com/media/l0NwHXQy3kUSfFF60/giphy.gif
Je savais pas.

gg wp

Bonne journée !
Modifié par _laurent (15 Dec 2020 - 10:28)
Hello les zamis,

Merci pour vos réponses instructives Smiley smile !!

@Laurent: oui effectivement y'a moins de DIV Smiley biggol par contre au lancement de la page on se retrouve avec les arcs de cercle en position d'origine, les ouvertures en haut ( sans les rotate, car on ne peux pas attribuer un transform 2x à un éléments il me semble ). C'est pour ça que j'avais mis une DIV juste pour ça, pour qu'au départ on soit dans une configuration visuellement sympa.

@gcyrillus: ah oui pour être moins intuitif Smiley lol
Il faut que je décortique un peu plus ton code c'est très intéressant, je ne me rappelais plus le coup du delay négatif !!
Modérateur
stryk a écrit :
@Laurent: oui effectivement y'a moins de DIV Smiley biggol par contre au lancement de la page on se retrouve avec les arcs de cercle en position d'origine, les ouvertures en haut ( sans les rotate, car on ne peux pas attribuer un transform 2x à un éléments il me semble ). C'est pour ça que j'avais mis une DIV juste pour ça, pour qu'au départ on soit dans une configuration visuellement sympa.

Effectivement. Pour rester dans ma solution je te propose alors d'alterner le border transparent (top left bottom right) sur chacun des cercles. La position de départ ne restant pas longtemps on ne remarque quasiment pas selon moi cet alignement :
#circle1 {
	border: solid 5px #FE8702;
	border-top-color: transparent;
	height: 70px;
	width: 70px;
	animation: rotate 2s infinite linear;
}

#circle2 {
	border: solid 5px #F4662C;
	border-left-color: transparent;
	height: 100px;
	width: 100px;
	animation: rotate 5s infinite linear;
}

#circle3 {
	border: solid 5px #EC494F;
	border-bottom-color: transparent;
	height: 130px;
	width: 130px;
	animation: rotate 3s infinite linear;
}

#circle4 {
	border: solid 5px #E52F6F;
	border-right-color: transparent;
	height: 160px;
	width: 160px;
	animation: rotate 6s infinite linear;
}

https://codepen.io/undless/pen/zYKZoxG

mais je te l'accorde on est pas sur du rotate de 301deg hahaha Smiley cligne
Modifié par _laurent (15 Dec 2020 - 12:03)
_laurent a écrit :

je te propose alors d'alterner le border transparent (top left bottom right) sur chacun des cercles. La position de départ ne restant pas longtemps on ne remarque quasiment pas selon moi cet alignement


Ah c'est vraiment pas bête du tout, oui on ne remarque pas ( enfin quand on le sait pas ^)

_laurent a écrit :

mais je te l'accorde on est pas sur du rotate de 301deg hahaha Smiley cligne

Bon j'avoue j'ai mis au pif les deg pour essayer de ne pas être aligné Smiley lol
Parce que j'ai remarqué aussi que dans ta première soluce on se retrouvait au bout d'un moment avec un ré alignement de départ ( chose qui n'arrivera pas en condition réelle vu que la page sera chargée et que l'animation disparait ).

C'est cool j'apprends pleins de choses Smiley smile
Merci !!!

EDIT: Petite question subsidiaire:
J'ai remarque aussi que si j'applique une règle border-top-color à une CLASS, l'élément ne le prend pas en compte, il faut appliquer la règle à l'élément par l'ID pour que ça fonctionne ...
Une idée ?
Modifié par stryk (15 Dec 2020 - 12:15)
Modérateur
stryk a écrit :
EDIT: Petite question subsidiaire:
J'ai remarque aussi que si j'applique une règle border-top-color à une CLASS, l'élément ne le prend pas en compte, il faut appliquer la règle à l'élément par l'ID pour que ça fonctionne ...
Une idée ?


Oui. C'est toujours une question de poids de sélecteur.
Tu a un id qui défini le border et la classe qui défini le border-color.
L'ID a plus de poid que la classe et comme border contient aussi border-color alors il l'écrase.
Pour bien procéder tu peux soit mettre des classes à la place des id (class vs class il faudra juste que le border-color soit déclaré après le border dans le CSS), soit que dans tes déclarations tu sépare les éléments ainsi :

.class {
    border-color: red;
}
#id {
    border-style: solid;
    border-width: 4px;
}

De cette facon même si l'ID écrase le reste, la propriété border-color n'est pas touchée.

Bonne aprem !
Ahhhh ok ok je comprends mieux maintenant !!!
Un grand merci pour cet éclairage !

Pour la simplification de mon CSS je regarde encore Smiley biggrin
Modérateur
_laurent a écrit :

...
oooook https://media.giphy.com/media/l0NwHXQy3kUSfFF60/giphy.gif
...

Bonne journée !


ça je kiff aussi , je ne sais pas comment tu les trouves ...
stryk a écrit :

@gcyrillus: ah oui pour être moins intuitif ....

pour régler les animations, comme elles sont imbriquées ...

la première(extérieur) à 6 secondes comme ton code.
puis pour le réglage des autres :
un reset à zéro ... tout le monde tourne ensemble,
* pour accélérer de deux fois par exemple, la seconde à 12s ,
* pour ralentir une rotation , idem on part de zéro avec animation-direction:reverse puis , plus la durée est courte , plus la rotation inverse est rapide . pour une vitesse divisée par deux ... et bien c'est la même valeur que celle du parent .
* Pour ensuite repartir sur une vitesse égale ou supérieur sur l'enfant, on repasse en animation-direction:normal Smiley cligne .

En gros chaque vitesse d'animation se recale sur celle du parent (qui fait visuellement référence).

0s , c'est synchro avec le parent ... en gros.


Je me suis permis une modif avec le text loading et un filtre basé sur ton animation initiale : https://codepen.io/gc-nomade/pen/poEerYq
Modifié par gcyrillus (15 Dec 2020 - 21:23)
Waaaa c'est vraiment sympa, joli travail j'adore !!!
Oui j'avais fini par bien comprendre ton code, c'est lisible en fait !

Sinon c'est pour un rendu sobre, ça va sur mon scrapper 'covid19':
http://olivier.maison.perso.free.fr/covid19/?country=france

Au départ j'avais mis un gif mais c'est plus fun en CSS.

Je vais mettre tout ça en pratique, un grand merci à vous 2 pour les idées et pour mon apprentissage Smiley smile
Modérateur
Salut les gars,
Chouettes propositions, c'est vraiment cool de voir les deux approches. Je serai parti sur la même approche que Laurent, mais je trouve le coté imbriqué de gcyrillus beaucoup plus malin. Après coup, je me demande si un svg ne serait pas mieux au final… Un avis la dessus ?
Hello Yordi,

AH oui c'est très sympa aussi avec un SVG !!! Smiley smile
Il faut vraiment que je m'entraine avec ça ( et tellement d'autres choses je suis une quiche en CSS )

Du coup y'a trop de propositions Smiley lol
Après je pense que l'exemple des 4 cercles n'est pas très significatif, et c'est avec des projets plus complexes qu'il serait judicieux de choisir telle ou telle méthode, parce que chacune à ses avantages et inconvénients. ça me fait une bonne base d'approche pour le futur et ça c'est fun.

Dans l'idéal:
_ Je vais commencer par raccourcir mon code avec les explications de Laurent
_ M'entrainer à l'imbrication comme gcyrillus parce que c'est très intéressant
_ Et le SVG ça peut vraiment être puissant pour des animations plus complexes et c'est surtout beaucoup moins gourmand en ressource que CANVAS ( pour ce qu'il est possible de faire en pure CSS je parle )

Vraiment MERCI à vous pour ces exemples et explications qui me font bosser le front !
( je suis full back en ce moment et notamment sur un projet perso de serveur domotique embarqué dans un ESP8266 )

Bonne journée messieurs Smiley smile
Modérateur
Yordi a écrit :
Salut les gars,
Chouettes propositions, c'est vraiment cool de voir les deux approches. Je serai parti sur la même approche que Laurent, mais je trouve le coté imbriqué de gcyrillus beaucoup plus malin. Après coup, je me demande si un svg ne serait pas mieux au final… Un avis la dessus ?


Oui, je pense que le SVG est ce qui est de plus approprié ici , on est en plein dans un élément de graphisme.

Nous nous sommes tous focalisé sur l'animation et un morceau de HTML Smiley cligne

Cdt
Hello parsimonhi,

Génial j'étais justement en train d'essayer de 'traduire' le scss en css !!!
Là c'est top je comprends tout Smiley ravi et bien vu les variables !!!

J'adore Smiley ravi
Modérateur
parsimonhi a écrit :
Ci-dessous une adaptation de la solution de Yordi (à base de SVG qui me semble à moi aussi la plus indiquée), facilement configurable : https://jsfiddle.net/parsimonhi/oL6xcmnd/

Plus ca va plus c'est beau hahaha Mais ou va s'arrêter la communauté des kiwi ?!! Smiley lol
Sujet clos
Aller à