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.