28172 sujets

CSS et mise en forme, CSS3

[Résolu] Animation SVG en CSS

Bonjour à tous

Je viens de m'auto-former au svg et à son animation et j'arrive à faire à peu près ce que je veux (un texte qui apparait comme si on l'écrivait). En revanche, la fonction "animation-delay" génère un pixel visible au début de l'animation, alors que ça ne devrai pas être le cas. Ce phénomène se produit sous Firefox, et pas Chrome.
Quelqu'un a-t-il déjà vu cela ?

Voici le code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="description" content="....">
<title>Page de base</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="prehome.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418.88 650.87">
<defs>
<style>.cls-1,.cls-2,.cls-3,.cls-5,.cls-6,.cls-9{fill:none;}.cls-1,.cls-5{stroke:#000;}.cls-1,.cls-2,.cls-3,.cls-5,.cls-6{stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:2px;}.cls-2,.cls-9{stroke:#4ea04e;}.cls-2{stroke-width:9px;}.cls-3,.cls-6{stroke:#f76da4;}.cls-3{stroke-width:12px;}.cls-4{fill:#f3cb29;}.cls-6{stroke-width:1.5px;}.cls-7{fill:#fab1ce;}.cls-8{fill:#f76da4;}.cls-9{stroke-miterlimit:10;stroke-width:3px;}</style>

</defs>
<title>prehome</title>
<path class="texte-les" id="texte-les-l" d="M570.36,245.77s-3.17,31.5-3.33,34.83-3,14.83,7.17,16.17a152.89,152.89,0,0,0,21.17,1" transform="translate(-177.32 -137.28)"/>
<path class="texte-les" id="texte-les-e" d="M610.7,274.94s6,3.17,18.33-4.17c7.95-4.72,9.33-21.32-5.17-22-14.17-.67-20.17,14.17-20.67,24.67s6.5,24.17,26.5,24,19.83-3.83,19.83-3.83" transform="translate(-177.32 -137.28)"/>
<path class="texte-les" id="texte-les-s" d="M689.06,267.27s3.83-2.5.17-7.33-27.19-8.17-27.5,4.33c-0.5,20.17,41.33,5,41.17,23.83-0.15,16.51-44.5,10.5-43,1.67" transform="translate(-177.32 -137.28)"/>


<path class="texte-fleur" id="texte-fleur-un" d="M746.72,407.42s13.5,7.13,41.25-9.38c17.88-10.63,21-48-11.63-49.5C744.47,347,731,380.41,729.84,404s14.63,54.38,59.63,54,44.63-8.63,44.63-8.63" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-deux" d="M1122,390.09s8.64-5.64.38-16.53-61.31-18.43-62,9.77c-1.13,45.47,93.19,11.27,92.82,53.74-0.33,37.23-100.33,23.67-97,3.76" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-trois" d="M619.86,461.44s-15.75-83.5-13.5-129.5" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-quatre" d="M563.11,339.44s62.5-21.75,145.25,5.5" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-cinq" d="M580.11,400.94s82.25-2.75,91.75-4.75" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-six" d="M703.86,463.44s7.75-71,0-130.75" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-sept" d="M855.86,356.94s-9.5,85,37,93.5c21.43,3.92,41.5-38.5,41.5-38.5" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-huit" d="M932.86,372.44s-3,50.5,18,86.5" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-neuf" d="M992.36,460.44s-26-54.5-21-89.5" transform="translate(-177.32 -137.28)"/>
<path class="texte-fleur" id="texte-fleur-dix" d="M969.86,381.94s28.5-31.5,70-6.5" transform="translate(-177.32 -137.28)"/>


<path class="texte-du" id="texte-du-un" d="M865.25,530.62s-4.22,37.77,16.44,41.54c9.52,1.74,18.44-17.11,18.44-17.11" transform="translate(-177.32 -137.28)"/>
<path class="texte-du" id="texte-du-deux" d="M899.46,537.51s-1.33,22.44,8,38.43" transform="translate(-177.32 -137.28)"/>
<path class="texte-du" id="texte-du-trois" d="M847.34,545.84s-13.57-13.57-23.32-12.3-14.41,12.72-12.72,22,3.82,17.81,12.72,17.81,23.32-10.6,24.59-16.11S847.34,545.84,847.34,545.84Z" transform="translate(-177.32 -137.28)"/>
<path class="texte-du" id="texte-du-quatre" d="M841,503.44s10.6,22.47,10.6,44.09,3.82,26.29,3.82,26.29" transform="translate(-177.32 -137.28)"/>


<path class="texte-bonheur" id="texte-bonheur-un" d="M1228.17,657.06s16.52,8.72,50.48-11.47c21.88-13,25.68-58.7-14.23-60.57-39-1.84-55.53,39-56.9,67.92s17.9,66.54,73,66.08,54.61-10.55,54.61-10.55" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-deux" d="M1360.56,596s-11.85,106,46.14,116.6c26.72,4.88,51.75-48,51.75-48" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-trois" d="M1456.58,615.32s-3.74,63,22.45,107.87" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-quatre" d="M1530.72,724.64s-32.56-68.24-26.3-112.07" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-cinq" d="M1502.54,626.34s35.69-39.44,87.65-8.14" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-six" d="M654.36,705.27s22-47.33-22.67-169.33" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-sept" d="M584.36,546.61s56.67-22,88-12.67,89.33,29.33,20,73.33c0,0,86.67,31.33,80.67,78s-58,42.67-114.67,17.33" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-huit" d="M877,615.94s47.33,22,42.67,48.67-19.33,56-66.67,57.33S761,623.94,877,615.94Z" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-neuf" d="M966.36,726.61s-16.67-26-18-112" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-dix" d="M950.36,639.94s34-38.67,60.67-32,52,63.33,40,113.33" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-onze" d="M1095.26,721.94s10-44-16-168" transform="translate(-177.32 -137.28)"/>
<path class="texte-bonheur" id="texte-bonheur-douze" d="M1093,623.27s58.67-49.33,80,29.33c6.71,24.76-3.33,70.67-3.33,70.67" transform="translate(-177.32 -137.28)"/>
</svg>
</body>
</html>


et le css qui va avec :

@keyframes texte {

to {
stroke-dashoffset: 0;
}
}

svg {
width : 70%;}

.texte-les {
stroke : #000;
stroke-width: 2px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 150;
stroke-dashoffset: 150;}
#texte-les-l {
animation: texte .3s linear forwards;
animation-delay : 1s;}
#texte-les-e {
animation: texte .3s linear forwards;
animation-delay : 1.3s;}
#texte-les-s {
animation: texte .3s linear forwards;
animation-delay : 1.6s;}


.texte-fleur {
stroke-width: 9px;
stroke: #4ea04e;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 350;
stroke-dashoffset: 350;}
#texte-fleur-un, #texte-fleur-deux, #texte-fleur-trois, #texte-fleur-quatre, #texte-fleur-cinq, #texte-fleur-six, #texte-fleur-sept, #texte-fleur-huit, #texte-fleur-neuf, #texte-fleur-dix {
animation: texte .4s linear forwards;}
#texte-fleur-trois {
animation-delay : 2.3s; }
#texte-fleur-quatre {
animation-delay : 2.4s; }
#texte-fleur-cinq {
animation-delay : 2.6s; }
#texte-fleur-six {
animation-delay : 2.8s; }
#texte-fleur-un {
animation-delay : 3s; }
#texte-fleur-sept {
animation-delay : 3.4s; }
#texte-fleur-huit {
animation-delay : 3.7s; }
#texte-fleur-neuf {
animation-delay : 3.9s; }
#texte-fleur-dix {
animation-delay : 4.1s; }
#texte-fleur-deux {
animation-delay : 4.2s; }



.texte-du {
stroke : #000;
stroke-width: 2px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 350;
stroke-dashoffset: 350;}
#texte-du-un, #texte-du-deux, #texte-du-trois, #texte-du-quatre{
animation: texte .5s linear forwards;}
#texte-du-un {
animation-delay : 5s; }
#texte-du-deux {
animation-delay : 5.2s; }
#texte-du-trois {
animation-delay : 4.6s; }
#texte-du-quatre {
animation-delay : 4.8s; }


.texte-bonheur {
stroke-width: 12px;
stroke: #f76da4;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
stroke-dasharray: 470;
stroke-dashoffset: 470;}
#texte-bonheur-un, #texte-bonheur-deux, #texte-bonheur-trois, #texte-bonheur-quatre, #texte-bonheur-cinq, #texte-bonheur-six, #texte-bonheur-sept, #texte-bonheur-huit, #texte-bonheur-neuf, #texte-bonheur-dix, #texte-bonheur-onze,#texte-bonheur-douze {
animation: texte .4s linear forwards;}
#texte-bonheur-six {
animation-delay : 5.3s; }
#texte-bonheur-sept {
animation-delay : 5.7s; }
#texte-bonheur-huit {
animation-delay : 6.2s; }
#texte-bonheur-neuf {
animation-delay : 6.6s; }
#texte-bonheur-dix {
animation-delay : 6.8s; }
#texte-bonheur-onze {
animation-delay : 7.3s; }
#texte-bonheur-douze {
animation-delay : 7.5s; }
#texte-bonheur-un {
animation-delay : 7.8s; }
#texte-bonheur-deux {
animation-delay : 8.1s; }
#texte-bonheur-trois {
animation-delay : 8.5s; }
#texte-bonheur-quatre {
animation-delay : 8.8s; }
#texte-bonheur-cinq {
animation-delay : 9.1s; }


Si vous avez des conseils également sur mon code, je suis preneuse !
Merci par avance de votre aide
Bonjour

Pas de réponses ? Ma question est peut-être mal posée...
Je reprends Smiley smile

Mon animation commence avec une page blanche puis du texte viens s'écrire au fur et à mesure (texte en svg).

Sur Chrome, pas de problème
Sur Firefox, au lieu d'avoir une page blanche au démarrage, il s'affiche tous les points de départs de mes traits (qui forment les lettres finales), ce qui n'est évidement pas souhaitable.

Merci par ava,ce de votre aide car je ne vois vraiment pas d'où cela peut venir... Smiley bawling
Modérateur
Salut,

Pour le dessiner tu utilise la méthode des pointillés que tu décale c'est ça ?
Tu a tenté de mettre un peu plus d'offset histoire que les faire "reculer" un peu plus que juste le début de ton trait ?

Check aussi du coté de stroke-linecap pour le mettre à "butt" pour ne pas qu'il dépasse
Bonjour

Merci pour votre réponse.
En effet, en mettant un "butt" à stroke-linecap , problème résolu !

Merci beaucoup
Bonjour

Merci pour votre réponse.
En effet, en mettant un "butt" à stroke-linecap , problème résolu !

Merci beaucoup
Bonjour

Merci pour votre réponse.
En effet, en mettant un "butt" à stroke-linecap , problème résolu !

Merci beaucoup
Sujet clos
Aller à