Del curso: CSS: 50 trucos
Accede al curso completo hoy mismo
Únete hoy para acceder a más de 24.900 cursos impartidos por expertos del sector.
Ciclos de animación con CSS - Tutorial de CSS
Del curso: CSS: 50 trucos
Ciclos de animación con CSS
En este truco te voy a mostrar cómo crear animación utilizando CSS y los 'keyframes' de CSS. Acá yo tengo una imagen de un reloj y también tengo una manecilla. Vamos a comenzar a animar este elemento. Te voy mostrar el código en el que estoy trabajando y tengo, básicamente, un contenedor con un par de elementos que generan el reloj y la manecilla. en el que vamos a trabajar específicamente va a ser en la manecilla. Te voy a mostrar también el CSS con que el que estoy trabajando. En general, estos son los elementos con los que estoy mostrando el contenido actual. Vamos a comenzar a animar este elemento utilizando la propiedad 'webkit-animation'. Dentro de la manecilla, lo que vamos a hacer es que esto va a hacer que la manecilla sea animada. Le vamos a poner acá el nombre de la animación que vamos a utilizar. En este caso, le voy a poner 'mi Animacion'. Vamos a definir el tiempo. Por ejemplo, cinco segundos. La 's' es segundos, entonces esto va a tener una duración de cinco segundos. Y…
Practica mientras aprendes con los archivos de ejercicios.
Descarga los archivos que el instructor utiliza para enseñar el curso. Sigue las instrucciones y aprende viendo, escuchando y practicando.