Bonjour, 

je tente d'avoir une petite animation en css. 

j'ai créer un bouton qui laisse apparaître un texte "soumettre" et quand il est survolé devient moins opaque et laisse apparaître l'icone d'une flèche avec un déplacement de gauche à droite. 

Je n'obtiens pas le déplacement de la flèche!

le code css est celui là

.form_topic button{
	border: none;
	text-align: center;
	font-family: sans-serif;
	color: white;
	font-size: 20px;
	background-color:  #1b9aed;
	height: 50px;
	width: 200px;
	transition: hover;
	transition-duration: 2s;
}
.form_topic button:after{
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
	position: relative;
	left: -250px;
	transition: transform;
	transition-duration: 2s;
}
.form_topic button:hover{
	opacity: 0.6;
}
..form_topic button:hover:after{
	transform: translateX(300px);
}

1/ je voudrais que la flèche vienne de la gauche et se place à droite!

2/ de plus l'opacité pareil, avoir plutôt une opacité qui se déplace

-
Edité par born1 14 juin 2019 à 17:36:18

Salut,

donne nous également le code html.

Tu peux commencer par corriger la ligne 25 qui comporte deux points au lieu d'un à son début...

Mais je pense surtout que ton problème vient de transition : hover.
Une transition se fait sur une propriété, comme font-size, width, background ou comme tu l'as fais avec transform mais pas sur un état comme :hover, :focus ou autres.

Pour l'opacity qui se déplace je n'ai pas compris le concept...

-
Edité par Frogweb 14 juin 2019 à 18:23:40

  <form class="form_topic" enctype="multipart/form-data" method="post" action="ttt.php">
<?php $formPost = new Form($res);?>
       <fieldset id="espace_topic">
          <legend>espace topic</legend>
       </fieldset>
       <fieldset id="espace_reponse">
                   <legend >reponse</legend>
                   <textarea name="message">
                   </textarea>
                   <div class="importance">
                   	   <p>importance</p>
					   <input type="radio" name="priorite" id="basse" value="4" checked><label for="basse">basse</label>
					   <input type="radio" name="priorite" id="moyenne" value="3"><label for="moyenne">moyenne</label>
					   <input type="radio" id="haute" name="priorite" value="2"><label for="haute">Haute</label>
					   <input type="radio" id="importante" name="priorite" value="1"><label for="importante">Importante</label>
                   </div>
                   <?php
                    echo $formPost->inputFile('page', 'class= "upload" oninput="addButton()"');
                    echo '<span id="newInputFile" class="hidden"><a href="javascript:addFile()">Ajouter un fichier de plus</a></span>';
                    echo $formPost->submit('soumettre');
            }
           ?>

       </fieldset>
        
  </form>

EDIT:

Solution trouvée: l'élément à déplacé doit être un bloc, 

.form_topic button:after{
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
	position: relative;
	display: inline-block;
	left: -160px;
	color: blue;
	transition: transform;
	transition-duration: 1s;
}
.form_topic button:hover::after{
	transform: translate(170px);
	color: red;
}

-
Edité par born1 16 juin 2019 à 4:02:27