05/07/2012, 11:35
| |||
| |||
| ¿Me podríais ayudar con este keyframe? Verán necesito que me hagais un @keyframe en el que unos <li>, al entrar a la página, cambien el background a otro color uno detras de otro(uno detras de otro "<li>"). ¿Como se haría eso?. Otra pregunta: ¿es posible hacer un keyframe que se repita constantemente? |
|
05/07/2012, 11:57
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? Otro pedigüeño más. Tiene varias opciones: .- Poner códigos suyos, con los que está trabajando y se haya atascado para recibir ayuda concreta. Se necesita haberse molestado un mínimo, aunque sólo sea para localizar un ejemplo en el foro o la red y haber puesto un mínimo de su parte para comprenderlo. Si no está dispuesto a esforzarse un mínimo de su parte (creo que es su caso, porque tengo la casi absoluta certeza de que no ha leído ni una sola línea sobre las animaciones css) lo que le queda es: .- Poner un anuncio en ofertas. Ya sabe: o paga con su tiempo, esfuerzo y ganas de aprender o con su bolsillo. |
|
05/07/2012, 16:07
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? Ok. Retiro mi pregunta. Lo se, soy vago, pero es que ahora mismo lo que necesito es saber si es posible hacer un keyframe que dure constantemente. ¿Es posible?. Por cierto, si, "si tengo alguna remota idea de com hacer animaciones css. Mañana le pongo una. Si no se lo cree, no me respondas aún, respondeme mañana. Solamente quería eso, lo de si se puede hacer una animacion con css infinita. |
|
05/07/2012, 16:26
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? Ha planteado dos cuestiones que atañen a propiedades distintas: La primera es una propiedad del grupo de "transition" y la segunda del "animation" "transition-delay" "animation-iteration-count" Y se lo digo más claro para evitarle a usted y a nosotros más aclaraciones en el futuro: En este foro de css, expresiones como la utilizada por usted (y en el primer mensaje en los foros para más inri): Cita: no suelen ser bien recibidas.Verán necesito que me hagais un... Y quien se empeña en mantenerlas, suele quedar estigmatizado. Creo, y es sólo mi opinión, que debería procurar no hacerlo más veces. Pero como cada cual es muy libre de escribir lo que crea conveniente, yo el primero, usted también puede ejercer ese derecho. |
|
05/07/2012, 19:18
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? Pues bueno. Aquí he terminado la animación. Gracias por la ayuda y lo siento por lo de antes, kseso?. No, Siroguh, no me he "cagado". Ahora viene otra pregunta. ¿Es posible hacer que, por ejemplo, después de una animación (en la que he cambiado el background a rojo, en 1s) se quede PARA SIEMPRE el background de color rojo?. Por cierto, se me olvidaba, lo prometido es deuda:
Código:
<!DOCTYPE html>
<html>
<head>
<title>Animaciones de Prueba</title>
<style type="text/css">
#cara{
width:405px;
height:400px;
background:rgba(176,174,174,1);
border:1px solid #333;
border-radius:138px;
border-bottom-left-radius:69%;
border-bottom-right-radius:69%;
margin:0 auto;
margin-top:100px;
}
.anime{
width:200px;
height:200px;
margin:0 auto;
position: relative;
border:10px red;
display:inline-block;
}
.anime2{
width:200px;
height:200px;
margin:0 auto;
position: relative;
border:10px red;
display:inline-block;
}
#boca{
width:300px;
height:50px;
background:#296e29;
margin:0 auto;
margin-top:50px;
border-radius:10px;
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
}
#bocamod{
width:300px;
height:20px;
background:rgba(176,174,174,1);
margin:0 auto;
margin-top:0;
border-bottom-left-radius:100%;
border-bottom-right-radius:3%;
}
#a1{
width:200px;
height:200px;
border-radius:100px;
display: block;
vertical-align: middle;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
#a2{
width:180px;
height:180px;
border-radius:90px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -90px;
margin-left: -90px;
}
#a3{
width:160px;
height:160px;
border-radius:80px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -80px;
margin-left: -80px;
}
#a3{
width:140px;
height:140px;
border-radius:70px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -70px;
margin-left: -70px;
}
#a4{
width:120px;
height:120px;
border-radius:60px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -60px;
margin-left: -60px;
}
#a5{
width:100px;
height:100px;
border-radius:50px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
#a6{
width:80px;
height:80px;
border-radius:40px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -40px;
margin-left: -40px;
}
#a7{
width:60px;
height:60px;
border-radius:30px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px;
margin-left: -30px;
}
#a8{
width:40px;
height:40px;
border-radius:20px;
display: block;
vertical-align: middle;
position: relative;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -20px;
}
@-webkit-keyframes a1 {
50% {
background: #ef7901;
}
}@-moz-keyframes a1 {
50% {
background: #ef7901;
}
}#a1 {
-webkit-animation: a1 2.6s 1s ease infinite;
-moz-animation: a1 2.6s 1s ease infinite;
}
@-webkit-keyframes a2 {
50% {
background: #d54421;
}
}@-moz-keyframes a2 {
50% {
background: #d54421;
}
}#a2 {
-webkit-animation: a2 2.4s 1.2s ease infinite;
-moz-animation: a2 2.4s 1.2s ease infinite;
}
@-webkit-keyframes a3 {
50% {
background: #98bf0d;
}
}@-moz-keyframes a3 {
50% {
background: #98bf0d;
}
}#a3 {
-webkit-animation: a3 2.6s 1.4s ease infinite;
-moz-animation: a3 2.6s 1.4s ease infinite;
}
@-webkit-keyframes a4 {
50% {
background: #01b0ec;
}
}@-moz-keyframes a4 {
50% {
background: #01b0ec;
}
}#a4 {
-webkit-animation: a4 2.6s 1.6s ease infinite;
-moz-animation: a4 2.6s 1.6s ease infinite;
}
@-webkit-keyframes a5 {
50% {
background: #7449f1;
}
}@-moz-keyframes a5 {
50% {
background: #7449f1;
}
}#a5 {
-webkit-animation: a5 2.6s 1.8s ease infinite;
-moz-animation: a5 2.6s 1.8s ease infinite;
}
@-webkit-keyframes a6 {
50% {
background: #b147a3;
}
}@-moz-keyframes a6 {
50% {
background: #b147a3;
}
}#a6 {
-webkit-animation: a6 2.6s 2s ease infinite;
-moz-animation: a6 2.6s 2s ease infinite;
}
@-webkit-keyframes a7 {
50% {
background: #f6b402;
}
}@-moz-keyframes a7 {
50% {
background: #f6b402;
}
}#a7 {
-webkit-animation: a7 2.6s 2.2s ease infinite;
-moz-animation: a7 2.6s 2.2s ease infinite;
}
@-webkit-keyframes a8 {
50% {
background: #8d8d8d;
}
}@-moz-keyframes a8 {
50% {
background: #8d8d8d;
}
}#a8 {
-webkit-animation: a8 2.6s 2.4s ease infinite;
-moz-animation: a8 2.6s 2.4s ease infinite;
}
</style>
</head>
<body>
<div id="cara">
<div class="anime">
<div id="a1">
<div id="a2">
<div id="a3">
<div id="a4">
<div id="a5">
<div id="a6">
<div id="a7">
<div id="a8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="anime2">
<div id="a1">
<div id="a2">
<div id="a3">
<div id="a4">
<div id="a5">
<div id="a6">
<div id="a7">
<div id="a8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="boca">
<div id="bocamod">
</div>
</div>
</div>
<div id="tapar">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</div>
</body>
</html>
|
|
08/07/2012, 06:21
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? Ya lo se que no puedo ni voy a exigiros nada, pero ¿nadie sabe la respuesta?. Tengo otra duda además: Es posible en un keyframe que cuando pase la animación desaparezca el elemento animado con la propiedad "display:none"? |
|
09/07/2012, 08:46
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? Tengo la sensación que no se ha molestado ni en pinchar los enlaces que le dejé en #5 Y en caso de haberlo hecho y haber leído el par de artículos, tengo una mala noticia para usted: lo suyo no es el css. |
|
12/07/2012, 11:14
| |||
| |||
| Respuesta: ¿Me podríais ayudar con este keyframe? En Chrome la animación se desarma. ¿Probaste con JS? Por lo general no son combinables, pero si solamente hay que borrar un elemento después de cierto tiempo ... |
| Etiquetas: |
