Bonjour,
Voilà je rencontre un petit (gros) problème avec mon code. Enfin je m'arrache juste les cheveux dessus depuis 2 jours et je suis sûre que la solution est toute simple :(
Je souhaite animer une icone en SVG, draw. Sans utiliser du JS, juste du css.
J'ai réussi à faire l'animation que je voulais. Le problème c'est que l'animation est continuelle alors que je veux qu'elle se déclenche uniquement quand je passe la souris dessus et qu'elle dessine jusqu'au bout. J'ai test avec ::hover mais quand on sort de la zone icone l'animation s'arrete. --"
L'ideal serait de mettre cette icone dans un bouton.
Mon premier code est celui-ci : http://codepen.io/Energism/pen/ZORYgL?editors=1100
J'ai essayé de le coder differement, mais la le draw ne marche pas et je ne comprend pas pourquoi :
http://codepen.io/Energism/pen/qNKEPj?editors=1100
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<div class="bg">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" id="fichier-logo">
<g class="fichier">
<path class="path" stroke="#fff" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" d="M80,56.4H59.1v32h26V61.5L80,56.4z M84.1,61.9L84.1,61.9L80,62v-4.2L84.1,61.9z M60.1,87.4v-30H79V63h5.1v24.4H60.1z"/>
<line class="st1" x1="65.8" y1="66.4" x2="77.8" y2="66.4"/>
<line class="st1" x1="65.8" y1="70.4" x2="77.8" y2="70.4"/>
<line class="st1" x1="65.8" y1="74.4" x2="77.8" y2="74.4"/>
<line class="st1" x1="65.8" y1="78.4" x2="77.8" y2="78.4"/>
</g>
</svg>
</div>
<style type="text/css">
.st1{fill:none;stroke:#B7B7B7;stroke-linecap:square;stroke-miterlimit:10;}
body {
background-color: #222;
}
.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
path {
stroke="#000000"
animation: draw 3.5s infinite ;
-webkit-animation: draw 3.5s infinite ;
}
@keyframes draw {
50% {
stroke-dashoffset: 0;
}
}
</style>
Merci d'avance ! :)
Chloé-c
