Articles of css3

Comment empêcher l’animation de css3 réinitialisée une fois terminé?

J’écris une animation css3 et elle n’est exécutée qu’une seule fois. L’animation fonctionne bien, mais elle se réinitialisera à la fin de l’animation. Comment puis-je éviter cela, je veux garder le résultat au lieu de le réinitialiser. $(function() { $(“#fdiv”).delay(1000).addClass(“go”); }); #fdiv { width: 10px; height: 10px; position: absolute; margin-left: -5px; margin-top: -5px; left: 50%; […]

Pourquoi faut-il que + ou – soit entouré d’espaces blancs dans la méthode Calc ()?

Récemment, j’ai commencé à utiliser la méthode calc (…) dans CSS. J’ai rapidement appris que le code tel que: width: calc(100%-2) ne fonctionnerait pas, bien que l’ajout d’espace avant et après l’opérateur – corrigera le problème et la méthode calc fonctionnera correctement. Après avoir fait quelques recherches, j’ai trouvé que de nombreux articles de blog […]

Comment faire une animation de rotation des bordures en pointillés comme les «fourmis en marche»

Je travaille sur une animation CSS qui utilise des «pignons et des chaînes», mais je ne parviens pas à créer une séquence de rotation des frontières «lisse». Vous pouvez voir dans ce violon Comment (actuellement) j’utilise un pseudo-élément pour générer un effet de «rotation». Cela se fait en «basculant» entre une bordure en tirets blanche […]

Hauteur DIV définie en pourcentage de l’écran?

Je cherche à définir un DIV parent comme 70% de la hauteur totale de l’écran à 100%. J’ai défini le CSS suivant mais il ne semble rien faire: body { font-family: ‘Noto Sans’, sans-serif; margin: 0 auto; height: 100%; width: 100%; } .header { height: 70%; } Pour une raison quelconque, cela ne semble pas […]

Centrage absolu CSS

Récemment, je suis tombé sur cette méthode utilisée pour positionner un élément à la fois horizontalement et verticalement au centre. Cependant, je n’ai pas pu déterminer ce que chaque propriété fait. Quelqu’un pourrait-il m’expliquer quel est l’effet sur la mise en top:0, bottom:0, left:0, right:0 ? (Ce serait bien si vous pouviez l’expliquer en utilisant […]

Transformation CSS avec redimensionnement d’éléments

J’ai trouvé ceci: width / height after transform et plusieurs autres, mais rien n’est pas ce que je cherche. Ce que je veux, c’est faire évoluer quelque chose à 50% de sa taille (avec une belle transition animée bien sûr) et faire en sorte que la mise en page se réajuste à la nouvelle taille […]

Comment cibler l’iPhone 3GS et l’iPhone 4 en une seule requête multimédia?

J’essaie d’implémenter des mises en page alternatives pour l’iPad / iPhone et les anciens iPhones. J’ai établi que la meilleure méthode consiste à utiliser @media partir de la spécification CSS3. En tant que tel, ce sont mes questions médiatiques à la minute: @media screen and (max-width: 1000px) { … } Ci-dessus pour les petits écrans […]

Animations CSS avec délai pour chaque élément enfant

J’essaie de créer un effet en cascade en appliquant une animation à chaque élément enfant. Je me demandais s’il y avait une meilleure façon de le faire que cela: .myClass img:nth-child(1){ -webkit-animation: myAnimation 0.9s linear forwards; } .myClass img:nth-child(2){ -webkit-animation: myAnimation 0.9s linear 0.1s forwards; } .myClass img:nth-child(3){ -webkit-animation: myAnimation 0.9s linear 0.2s forwards; } […]

Centrage vertical et horizontal du texte en cercle en CSS (comme le badge de notification iphone)

Je cherche un moyen de faire un badge iphone-like multi-navigateur en CSS3. Je voudrais évidemment utiliser un div pour cela, mais des solutions alternatives seraient bien. Le facteur important est qu’il doit être centré horizontalement et verticalement dans tous les navigateurs. Un problème de conception intéressant concernant ces notifications est qu’elles ne peuvent pas avoir […]

La transformation de CSS3 fait tourner 1px shift dans Chrome

J’ai un problème en chrome avec une transition de rotation css3. La transition fonctionne correctement, mais juste après la fin de l’élément se déplace d’un pixel. L’autre chose étrange est que cela ne se produit que lorsque la page est centrée ( margin:0 auto; ). Le bogue est toujours là si vous supprimez également la […]