¿Qué son las animaciones en css3?

Las hojas de estilo (CSS) para los que no sepan definirlo de manera fácil, es un archivo que se encarga de dar colores, tamaños y estructura a nuestras páginas webs. Esta nueva evolución de animaciones con css3 nos permiten dar movimiento a cualquier elemento en nuestra web, es decir podemos hacer que por ejemplo una capa (div), un texto o una tabla tengan movimiento y al entrar en la web veamos texto apareciendo, algún elemento rotando o al pasar por encima con el ratón de una capa que gire o cambie de tamaño.

Desde que flash no es compatible con los dispositivos móviles el css3 ha cobrado mucha más importancia, ya que actualmente la gente cada vez entra más en internet con sus dispositivos, y gracias a las animaciones CSS podemos seguir disfrutando de movimiento y animaciones en nuestras pequeñas pantallas sin la necesidad de cargar archivos de gran tamaño para ello, como por ejemplo antes cuando utilizábamos flash.

Como hacer animaciones en html5 y css3

En internet hay infinidad de ejemplos de cómo animar nuestros elementos web y cada maquetador o programador querrá animar la parte o elemento que necesite asi que lo mejor es adentrarse en la red y buscar que necesitamos, es decir si por ejemplo queremos hacer que un texto se deslice por la ventana del navegador, el código sería:

animaciones css3 avanzadas

p {

animation-duration: 3s;

animation-name: slidein;

}

@keyframes slidein {

from {

margin-left: 100%;

width: 300%

}

to {

margin-left: 0%;

width: 100%;

}

}

¿Qué tipo de animaciones podemos hacer? Animaciones css3 avanzadas

Crear loops o efectos de transición, de escalado, transformaciones y rotaciones que harán que tu web se vea más dinámica, elegante y que esta animación ocupe muy poco. Las animaciones se logran gracias a la función “animation” y sus distintas propiedades con las cuales nos dan la posibilidad de configurar la duración, el ritmo y otras características.

¿Qué navegadores leen las animaciones en css3 y html5?

Pues como es normal los navegadores muy antiguos no leerán estos nuevos códigos, pero en la actualidad la mayoría de la gente podrá ver las animaciones ya que por lo menos por seguridad los sistemas operativos y navegadores suelen actualizarse para no tener problemas, dejamos una tabla comparativa donde se ve claramente desde que versión son compatibles.

tabla

Leave a Reply

Your email address will not be published. Required fields are marked

Centro de preferencias de privacidad

Cookies

El acceso a este Sitio Web puede implicar la utilización de cookies. Las cookies son pequeñas cantidades de información que se almacenan en el navegador utilizado por cada Usuario —en los distintos dispositivos que pueda utilizar para navegar— para que el servidor recuerde cierta información que posteriormente y únicamente el servidor que la implementó leerá. Las cookies facilitan la navegación, la hacen más amigable, y no dañan el dispositivo de navegación.

Las cookies son procedimientos automáticos de recogida de información relativa a las preferencias determinadas por el Usuario durante su visita al Sitio Web con el fin de reconocerlo como Usuario, y personalizar su experiencia y el uso del Sitio Web, y pueden también, por ejemplo, ayudar a identificar y resolver errores.

La información recabada a través de las cookies puede incluir la fecha y hora de visitas al Sitio Web, las páginas visionadas, el tiempo que ha estado en el Sitio Web y los sitios visitados justo antes y después del mismo. Sin embargo, ninguna cookie permite que esta misma pueda contactarse con el número de teléfono del Usuario o con cualquier otro medio de contacto personal. Ninguna cookie puede extraer información del disco duro del Usuario o robar información personal. La única manera de que la información privada del Usuario forme parte del archivo Cookie es que el usuario dé personalmente esa información al servidor.

Las cookies que permiten identificar a una persona se consideran datos personales. Por tanto, a las mismas les será de aplicación la Política de Privacidad anteriormente descrita. En este sentido, para la utilización de las mismas será necesario el consentimiento del Usuario. Este consentimiento será comunicado, en base a una elección auténtica, ofrecido mediante una decisión afirmativa y positiva, antes del tratamiento inicial, removible y documentado.

cookie_notice_accepted, PHPSESSID, gdpr[allowed_cookies], gdpr[consent_types], wfvt_854953179, wfwaf-authcookie-6551efe13cbfd0f309df2196394f1ef4, wordfence_verifiedHuman, wp-settings-1, wordpress_logged_in_b03ee833495d0a37b6d465ed4571f165, wordpress_test_cookie, wp-settings-time-1, wordpress_b03ee833495d0a37b6d465ed4571f165
1P_JAR, CONSENT, GMAIL_LOGIN, HSID, NID, SID, SIDCC
ELOQUA, _ga, _lipt, bcookie, lang, liap, lidc

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Translate »
Twitter
LinkedIn