Aplicar animaciones a cada elemento para que funcionen de forma independiente

neoarcangel · #1 (**permalink**) 10/02/2015, 11:29

Hola, estoy aprendiendo a manejar los keyframes en css 3 y pienso que mi problema viene de ahi y no del propio css, aunque no estoy seguro.
La idea es que quiero dos botones centrados y alineados horizontal y verticalmente y quiero que cuando pases el raton haga la misma animacion pero solo cuando pulsas cada elemento o boton (en mi caso), el problema es que cuando paso el raton la animacion pasa en los dos elementos al mismo tiempo.
Llevo tiempo mirando informacion y no sé exactamente que hago mal.
Aqui mi codigo html.

Código HTML:

<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="indexremoto/keyframes.css"  />
        <link rel="stylesheet" type="text/css" href="indexremoto/efectoperss.css"  />
      
        <title></title>
    </head>
    <body>
        

    <div class="container ">
        <div id="minimenu">
               
                    <ul>
                        <li >
                            <div >
                                <a  href="" class="botones" ><span>Programacion</span></a>
                            </div>
                        </li>
                        <li >
                            <div >
                                <a  href="" class="botones"><span>Diseño</span></a>
                            </div>
                        </li>
                    </ul>
              </div>
        </div>

 </body>
</html>

Aqui keyframes.css

Código HTML:

   body
            {background-color: #99ff99};
            .borde
            {
                border: 2px solid red;
            }
            .centradovertical
            {   
                  position: absolute;
                    left: 45%;
                  top: 50%;
              
            }
          
            .botones
            {
                //outline:  9px solid white;
                opacity: 0.7;
            }    
            .botones:hover
            {
                
                -moz-animation:botonesmoviendose 2s;
                
                -moz-animation-iteration-count: 5;
                border-radius: 50px;
               
               
             }
          
           
         #minimenu    ul {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -15px; /* 50% of the line-height in a */
  text-align: center;
}
#minimenu  li {
  display: inline-block;
  list-style: none;
  margin-left: 5px;
}
#minimenu  li:first-child { margin-left: 0;}
#minimenu  li a 
{  
  background: #5fa9c5; 
  border: 1px solid #777; 
  display: block;
  font-family: Tenor Sans, sans-serif;
  color: #444;
  font-weight: bold;
  text-decoration: none; 
  line-height: 30px; /*margin-top of ul plus 2*/
  padding: 0 10px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
border-radius: 4px;}

#minimenu  a:hover {
  background: #363636;
  color: #5fa9c5;
  border: 1px solid #5fa9c5;
}

Y aqui la animacion efectoperss.css

Código HTML:

   @-moz-keyframes botonesmoviendose
            {
                20%
                { 
                    margin-top:20%;
               
                }

                40%
                {
                    margin-top:0%;
                }

                70% 
                
                {
                    margin-top:20%;
                }
                
              
              }

Lo de menos es esta animacion, lo que quiero es que sea la animacion que sea la aplique de forma independiente a cada elemento.

Gracias.

pzin · #2 (**permalink**) 10/02/2015, 13:18

No es un problema de la animación. Ni tan siquiera de que los dos se animan a la vez.

El problema es que los elementos de la lista están con un display: inline-block.

En principio lo arreglas agregándole:

Código CSS:

Ver originalvertical-align: top;

neoarcangel · #3 (**permalink**) 11/02/2015, 05:13

He probado eso y no me funciona.
Lo que quiero que cambie es que la animacion se aplique a cada elemento individualmente, no el hover, el hover funciona correctamente.

Aqui os pongo el mismo codigo pero en una pagina donde podeis modificar el codigo y sobre todo ver el efecto

http://jseditor.proyectosbds.com/welcome/19728/edit

pzin · #4 (**permalink**) 11/02/2015, 08:41

Si haces lo que te he dicho funciona perfectamente.