logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:2eval:tema08

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
Próxima revisión Ambos lados, revisión siguiente
clase:daw:diw:2eval:tema08 [2021/01/22 17:54]
admin [Animaciones] 		clase:daw:diw:2eval:tema08 [2022/01/23 18:37]
admin [8. Animaciones]
Línea 27: Línea 27:
   * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]   * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]
   * [[https://www.youtube.com/watch?v=MXMlTOnZSvo|Evangelina Ferreira - Newton meets CSS]]   * [[https://www.youtube.com/watch?v=MXMlTOnZSvo|Evangelina Ferreira - Newton meets CSS]]
 +  * [[https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9|The ultimate guide to proper use of animation in UX]]
  
  
Línea 272: Línea 273:
 Mas información: Mas información:
   * [[http://www.w3schools.com/css/css3_animations.asp|CSS3 Animations]]   * [[http://www.w3schools.com/css/css3_animations.asp|CSS3 Animations]]
-  * [[https://www.sitepoint.com/top-9-animation-libraries-use-2016/|Top 9 Animation Libraries to Use in 2016]]+  * [[https://css-tricks.com/css-animation-libraries/|CSS Animation Libraries]] 
 +  * [[https://animxyz.com/|AnimXYZ]]
   * [[https://daneden.github.io/animate.css/|Animate.css]]   * [[https://daneden.github.io/animate.css/|Animate.css]]
   * [[https://minimamente.com/example/magic_animations/|Magic Animations]]   * [[https://minimamente.com/example/magic_animations/|Magic Animations]]
 +  * 
  
  
Línea 296: Línea 299:
                          
             .c-cuadrado--girar {             .c-cuadrado--girar {
-              animation-name: c-cuadrado-girar;+              animation-name: animacion-girar;
               animation-duration: 3s;               animation-duration: 3s;
             }             }
                          
                          
-            @keyframes c-cuadrado-girar {+            @keyframes animacion-girar {
               0% {               0% {
                 transform: rotate(0deg);                 transform: rotate(0deg);
Línea 308: Línea 311:
                              
               50% {               50% {
-                transform: rotate(365deg);+                transform: rotate(360deg);
                 background-color: #1C4673;                 background-color: #1C4673;
               }               }
Línea 397: Línea 400:
 <sxh css> <sxh css>
 .c-cuadrado--girar { .c-cuadrado--girar {
-  animation-name: c-cuadrado-girar;+  animation-name: animacion-girar;
   animation-duration: 1.5s;   animation-duration: 1.5s;
   animation-iteration-count: 2;   animation-iteration-count: 2;
Línea 404: Línea 407:
  
  
-@keyframes c-cuadrado-girar {+@keyframes animacion-girar {
   0% {   0% {
  transform: rotate(0deg);  transform: rotate(0deg);
Línea 411: Línea 414:
      
   100% {   100% {
- transform: rotate(365deg);+ transform: rotate(360deg);
  background-color: #1C4673;  background-color: #1C4673;
   }    } 
clase/daw/diw/2eval/tema08.txt · Última modificación: 2022/02/13 19:57 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki