Animaciones CSS3 al fin del ciclo

26/Mar/2014 76

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación:

/* creando la animación */
@keyframes gira-y-quedate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(160deg);
}
}
#elemento {
animation-name: gira-y-quedate;
animation-duration: 1s;
animation-iteration-count 1;
}

Como notarán al terminar la animación esperamos que quede con la rotación de 160 grados y se detenga pero lo que sucede es que vuelve al keyframe inicial, a los 0 grados. Ese es el comportamiento por defecto de la propiedad animation-fill-mode, la cual especifica cómo debe aplicarse una animación CSS al elemento antes y después que se ejecute. Los valores de esta propiedad son:

  • none (por defecto, la animación no aplicará ningún estilo al elemento antes ó despues de ejecutarse)
  • forwards (el elemento mantendrá su(s) valor(es) en el último keyframe de su animación)
  • backwards (el elemento aplicará su(s) valor(es) definidos en el primer keyframe de su animación)
  • both (la animación aplicará las propiedades de fowards y backwards, antes y después de ejecutarse)

Por lo que aplicando correctamente la propiedad al llamado de la animación obtenemos el resultado esperado:

#elemento {
animation-name: gira-y-quedate;
animation-duration: 1s;
animation-iteration-count 1;
animation-fill-mode: forwards;
}

Link:

Comentarios

  1. Tmjust [#]

    Tvzkgh – real viagra online usa Ynborh mjudso

  2. Kfruov [#]

    ivermectin 6mg dosage – ivermectin 400 mg brands ivermectin humans

  3. Anitrc [#]

    stromectol 3 mg tablet – where can i buy oral ivermectin stromectol 3 mg tablet price

  4. Ukstdr [#]

    stromectol 12 mg – stromectol price in india ivermectin 1% cream generic

  5. Richardlah [#]

    cost of cialis without insurance buy cialis very cheap prices fast delivery – cialis original for sale
    ordering cialis online australia

  6. Richardlah [#]

    buy cialis online overnight buy cialis insurance – cialis 5mg tablet
    safe buy cialis

  7. Javierexesk [#]

    tinder date , tinder dating app
    tinder dating app

  8. Xmnmps [#]

    ivermectin pills – buy ivermectin cream purchase ivermectin

  9. Richardlah [#]

    canadian pharmacy cialis 20mg ed drugs – buy cialis now
    cialis original for sale

  10. Uierst [#]

    where can i buy oral ivermectin – ivermectin pill cost stromectole online

  11. Richardlah [#]

    buy cialis canadian erectile dysfunction pills – buy cialis cheaper online
    cialis 20mg usa

  12. Gbohme [#]

    stromectol tablets – ivermectin malaria ivermectin 200mg

  13. Richardlah [#]

    buy cheap cialis overnight cheapest generic cialis australia – buy cialis in miami
    buy cialis tadalafil uk

  14. RenaldoLiz [#]

    buy viagra generic buy viagra online – 100mg viagra without a doctor prescription
    cost of viagra

  15. Ebscop [#]

    stromectol without prescription – ivermectin pills human stromectol order

  16. RenaldoLiz [#]

    viagra professional generic viagra without a doctor prescription – cost of viagra
    over the counter alternative to viagra

  17. RenaldoLiz [#]

    100mg viagra without a doctor prescription buy viagra online without a prescription – viagra without prescription
    cost of viagra

  18. Pujzfq [#]

    plavix price in canada – clopidogrel prescription clopidogrel 75 mg daily

  19. Javierexesk [#]

    tinder app , tinder sign up
    http://tinderentrar.com/

  20. RenaldoLiz [#]

    buy viagra online buy viagra – viagra without prescription
    buy generic viagra online

  21. Michaelerura [#]

    cialis tadalafil portugal: buy cialis tadalafil tablets can i buy cialis online
    cialis without presciption in usa

  22. wioooqwymdl [#]

    31ikew pkrqldizgklr, [url=http://tyvqwxfccthb.com/]tyvqwxfccthb[/url], [link=http://moctggtoffdk.com/]moctggtoffdk[/link], http://sabspxnnavbv.com/

  23. Lzxotu [#]

    best non prescription ed pills – erectile dysfunction and its different causes and treatment pills for erection

  24. Michaelerura [#]

    buy cialis canadian: cialis online daily generic cialis canadian
    cheap generic cialis

  25. Jorsuo [#]

    best otc ed pills 2016 – skyn ed pill ed pills 365 erfahrung

  26. Michaelerura [#]

    original cialis low price: п»їhow much does cialis cost with insurance buy cialis online cheap
    cialis 5mg tablet

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab