28172 sujets

CSS et mise en forme, CSS3

Déclencher un événement depuis css

Bonjour !
j'apprends le html5 / CSS3.
j'ai un soucis, j'ai crée une animation en CSS3 avec @keyframes. Ce que je souhaiterais faire c'est de déclencher cette animation depuis un formulaire (soit lorsqu'on champs de mon formulaire prend le focus) mais je n'y arrive pas et je ne sais pas comment le faire. Ma préoccupation est la suivante est ce que c'est possible de le faire en CSS3 ? ou y'a t-il un autre utilitaire pour le faire. Merci d'avance ! Cordialement
Je n'ai jamais utilisé les @keyframes mais pour définir des styles à un de tes champs lorsqu'il est sélectionné, tu peux utiliser la pseudo-classe ":focus", tout simplement !
Merci de m'avoir répondu !
concernant ce que vous me demandez de faire je pense l'avoir déjà fait ça ne passe pas.
Certainement c'est moi manques de tact dans son utilisation.

je vous montre comment je l'ai fait à mon niveau :

CSS 

@keyframes nom-animation
{
 ....
}

#login :focus
{
  animation-nom-animation;
   animation-duration:5s;
}


HTML


<form>
Login : <input type="text" id="login">
</form>

Modifié par versaille21 (28 May 2013 - 15:47)
A priori, l'utilisation est bonne mais il n'y a pas d'espace :


#login:focus {
animation: nom-animation;
animation-duration: 5s;
}


J'en ai profité pour corriger la faute à la première ligne "animation".
Modifié par j0r (28 May 2013 - 15:49)
merci !
mais dans mon code il n'y pas d'espace ! c’était une erreur de frappe !
Merci de continuer à m'aider svp !

je peux déclencher l'evenement par clic sur un lien mais pas par la prise de focus d'un champs !
Merci d'avance !
Tu as bien fait la modification de cette ligne ?


animation-nom-animation;


Regarde bien ce que j'ai marqué.
Je ne sais pas quel navigateur tu utilises mais les animations sont des propriétés CSS3, ce qui signifie qu'il faut que tu rajoutes les différents préfixes pour que ça fonctionne sur tous les navigateurs.
Modifié par j0r (28 May 2013 - 17:20)
effectivement !
ce que j'ai fait ! bon ok ! je colle içi la zone concerné de mon css




  #login:focus
   {

      -webkit-animation-name:anim1;
       -webkit-animation-duration:5s;
      -moz-animation-name:anim1;
      -moz-animation-duration:5s;
      animation-name:anim1;
      animation-duration:5s;
    }


anim1 est le nom de mon animation realise avec keyframes

Merci d'avance
Modifié par versaille21 (28 May 2013 - 17:27)
ça marche quand je le fais par clic sur un lien; je vous le montre




<p><a href="#avion">Gerer les sorties se voit plus facilite !!!</a> <p>







@-webkit-keyframes anim1
{
   0%
   {
      top:0;
      left: 0;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);

   }

    30%
   {
      top:347px;
      left: 0;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }

   100%
   {
      top:326px;
      left: 548px;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }

}


@-webkit-keyframes anim1
{
   0%
   {
      top:0;
      left: 0;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);

   }

    30%
   {
      top:347px;
      left: 0;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }

   100%
   {
      top:326px;
      left: 548px;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }

}



@-moz-keyframes anim1
{
   0%
   {
      top:0;
      left: 0;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);

   }

    30%
   {
      top:347px;
      left: 0;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }

   100%
   {
      top:326px;
      left: 548px;
      -webkit-transform:rotate(0deg);
      -moz--transform:rotate(0deg);
      transform:rotate(0deg);
   }

}  




     #avion:target
   
   {

      -webkit-animation-name:anim1;
       -webkit-animation-duration:5s;
      -moz-animation-name:anim1;
      -moz-animation-duration:5s;
      animation-name:anim1;
      animation-duration:5s;

    }



avec ce code quqnd je clic sur le lien mon animation marche parfaitement.

je veux le faire marcher par prise du focus sur un champs d'un formulaire( input)

Merci de m'aider
salut,
tu es entrain d'utiliser des top et des left dans tes animations, est-ce que tu as positionné l'élément que tu veux animer autre qu'en "static" ?
Un exemple simple :

<form>
	<label for="login">Login : </label><input type="text" id="login">
	<label for="blabla">blabla : </label><input type="text" id="blabla">
</form>



@keyframes anim1 {from {top:0;}to {top:-25px;}}
@keyframes anim2 {from {top:0;left:0;transform:rotate(0deg);}to {top:250px;left:130px;transform:rotate(360deg);}}
body {padding-top:60px;}
#login, #blabla {position:relative;}
#login:focus {animation:anim1 .3s 2 alternate ease-out;}
#blabla:focus {animation:anim2 1s 2 alternate ease-out;}
Sujet clos
Aller à