¿Es una carrera de atención médica adecuada para usted?

Tome la prueba gratis

Blog

animaciones CSS

Crea animaciones CSS geniales con animate.css

Si ha aprendido los conceptos básicos de HTML y CSSy quieres divertirte creando animaciones CSS geniales, echa un vistazo animate.css. Animate.css es uno de los miles de bibliotecas de código que están disponibles en Internet, para hacer su vida un poco más fácil. Las bibliotecas de código (como animate.css) son básicamente archivos de texto llenos de código que alguien ya escribió y luego decidió compartir con usted. En nuestro caso, el archivo llamado animate.css está lleno de código CSS que crea animaciones simples y divertidas que puede usar en sus páginas web.

 

CÓMO USAR ANIMATE.CSS

Primero, ve a https://daneden.github.io/animate.css/ y descargue el archivo animate.css. Mientras esté allí, tómese un momento para jugar con las diversas animaciones haciendo clic en el botón "animar".

Ahora coloque animate.css en una carpeta de su computadora. Si ya tiene un proyecto HTML con el que está jugando, puede agregar animate.css a esa carpeta; si no es así, cree una nueva carpeta y coloque animate.css dentro.

A continuación, abra animate.css en su editor de texto favorito. Si no ha utilizado un editor de código especializado antes, consulte nuestro tutorial sobre cómo empezar con atom.ioy vuelva a este tutorial cuando haya configurado Atom en su computadora.

Eche un vistazo al código en animate.css. Es realmente muy simple y fácil de leer si está familiarizado con CSS. Si desea probar sus habilidades de CSS, tómese unos minutos en este punto para intentar usar animate.css para crear una animación o dos. O simplemente puede seguir leyendo este tutorial ...

Cree un archivo HTML en la misma carpeta que animate.css. Puede llamarlo index.html, animationTest.html o cualquier otra cosa que desee, siempre que termine en .html. Ponga una plantilla HTML básica (puede encontrar una al final de este tutorial) para que pueda comenzar a hacer algo de magia de animación.

En el sección, vincule su archivo HTML al archivo animate.css. Tu código debería verse así:

<p>Now, in the <body> section, create an HTML element that you will want to animate. Let?s use this image, for example: <img src="?https://fvi.edu/wp-content/uploads/2015/12/CSS3_Logo_512-624%C3%973561.jpg?"></body></p>

Guarde su archivo HTML y luego haga doble clic en él (en la carpeta) para abrirlo en su navegador. Ahora debería ver una página en blanco con una sola imagen.

Echemos un vistazo rápido al código CSS para tener una idea de cómo usarlo. Al abrir el archivo, notará que la primera clase definida es .animated, lo que básicamente le da a cualquier elemento HTML el código CSS básico y general que necesitará para ser animado. Si miras más abajo en el archivo, verás todo tipo de animaciones CSS, desde .bounce hasta .pulse y .fadeOutRightBig. Estas son animaciones específicas que puede utilizar como desee. ¡Así que todo lo que necesitas hacer para animar tu aburrida imagen estática es agregarle un par de clases! Cada imagen (u otro elemento HTML) que desee animar debe recibir la clase .animated. Luego, puede elegir cualquier animación (.pulse, por ejemplo) y agregar esa clase a su imagen también.

<p>So let?s make some magic! Add the .animated and the .pulse classes to your image. &nbsp;Your code should look something like this:&nbsp;<img src="?https://fvi.edu/wp-content/uploads/2015/12/CSS3_Logo_512-624%C3%973561.jpg?" class="?animated" pulse> &nbsp; Now save the HTML file, and reload it in your browser. Viola! Your image pulses with life! But that?s boring, right? It only pulsed once, and then went back to being a plain old static image. Well, if we add the .infinite class, the image will keep pulsing forever! Try it now; your code should look something like this:&nbsp;<img src="?https://fvi.edu/wp-content/uploads/2015/12/CSS3_Logo_512-624%C3%973561.jpg?" class="?animated" infinite pulse></p>

Ahora que ha aprendido a usar la biblioteca animate.css para crear divertidas animaciones CSS en segundos, ¡depende de usted darle un buen uso a sus propias páginas web! Si sabe cómo usar JavaScript / jQuery, puede activar estas animaciones cuando lo desee; cuando un espectador se desplaza más allá de una imagen, cuando el mouse se mueve sobre la imagen, cuando el espectador presiona una tecla determinada, etc. Incluso puede activar estas animaciones en: eventos de desplazamiento con CSS básico. Pero ese es un tutorial para otro momento.

Por ahora, diviértete creando animaciones CSS con animate.css y ¡feliz codificación!

PLACA CALDERA HTML BÁSICA


<html></html>




<body></body>