1

Pretendo pasar esta animacion de parpadeo de css a javascript(lo quiero activar desde javascript)

#formulario:hover{
       /*position: absolute;*/

  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

estaba intentando pasar a js asi:

window.addEventListener('load', inicio );
function inicio(){
alert("hol");
    var formulario=document.getElementById('formulario');
    formulario.addEventListener('mouseover', encima);
}
function encima(evt){

    var formulario=document.getElementById('formulario');
    formulario.style.opacity = "0.5";
}

pero no esta reconociendo el alert

4
  • Lo siento @rn3w pero tu pregunta ahora mismo es muy amplia y tampoco está muy claro lo que realmente necesitas. Commented el 26 nov. 2016 a las 14:46
  • @Error404 lo modifico en un momento
    – hubman
    Commented el 26 nov. 2016 a las 14:46
  • A mí si que me entra en el alert: jsfiddle.net/2oj8cq7b Commented el 26 nov. 2016 a las 15:23
  • @Error404 habia un error mas arriba en mi codigo, puse un if sin cerrar
    – hubman
    Commented el 26 nov. 2016 a las 15:31

1 respuesta 1

6

En el siguiente código podemos asignar y eliminar la clase animacion al elemento deseado.

function initAnimation(){
   document.getElementById('formulario').className ='animacion';
}

function endAnimation(){
    document.getElementById('formulario').className ='';
}
.animacion {
       /*position: absolute;*/

  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

#formulario {  
  width: 100px;
  height: 100px;
  background: pink;
}
<div id="formulario"></div>
<br>
<button onclick="initAnimation()">activar</button>
<button onclick="endAnimation()">desactivar</button>

El efecto lo puedes hacer también con jQuery si lo deseas:

animacion = function(){
  
    $("#formulario").fadeTo(500, .1)
                    .fadeTo(500, 1);
}

setInterval(animacion, 1000);
#formulario {  
  width: 100px;
  height: 100px;
  background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="formulario"></div>

o en puro javascript

animacion = function(){
  
  document.getElementById('formulario').classList.toggle('fade');
}

setInterval(animacion, 500);
#formulario {  
  width: 100px;
  height: 100px;
  background: pink;
  opacity:1;
  transition: opacity .5s;
}

#formulario.fade {
  opacity:0;
}
<div id="formulario"></div>

6
  • lo que quise hacer fue pasar todo el codigo a js, pero creo que esto es mejor
    – hubman
    Commented el 26 nov. 2016 a las 15:07
  • @rn3w - te he puesto el efecto con jquery Commented el 26 nov. 2016 a las 15:22
  • 1
    listo solucionado.
    – hubman
    Commented el 26 nov. 2016 a las 15:24
  • cual es el efecto que se mueve a los costados y es usado cuando un campo requerido no esta llenado?
    – hubman
    Commented el 26 nov. 2016 a las 15:33
  • @rn3w - no se a que te refieres es uno de estos? Commented el 26 nov. 2016 a las 15:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.