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
clase:daw:diw:2eval:tema08 [2021/01/07 18:12]
admin [Ejercicios] 		clase:daw:diw:2eval:tema08 [2022/02/13 19:57] (actual)
admin
Línea 22: Línea 22:
  
 Mas información: Mas información:
-  * [[https://www.youtube.com/watch?v=sX5hzEMMQAI|Animaciones y transiciones CSS]]: Vídeo de Youtube +  * Diseño 
-  * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]] +    * [[https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9|The ultimate guide to proper use of animation in UX]] 
-  * [[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://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/|The Guide To CSS Animation: Principles and Examples]] 
 +  * CSS 
 +    * [[https://www.youtube.com/watch?v=sX5hzEMMQAI|Animaciones y transiciones CSS]]: Vídeo de Youtube 
 +    * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]] 
 +    * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]] 
  
  
Línea 231: Línea 236:
   * propiedadCSS: La propiedad CSS a la que se le aplica la transición.   * propiedadCSS: La propiedad CSS a la que se le aplica la transición.
   * duracion: Duración en segundos de la transición   * duracion: Duración en segundos de la transición
-  * timing-function: La velocidad de la transición. Sus valores son: +  * timing-function: La velocidad de la transición.  Sus valores son: 
-    * ''linear'': Velocidad constante. //e=v*t//+    * ''linear'': Velocidad constante. $e=v \cdot t$
     * ''ease''     * ''ease''
-    * ''ease-in'': Aceleración constante //e=½a*t²//+    * ''ease-in'': Aceleración constante. $e=\frac{1}{2} \cdot a \cdot t^{2}$
     * ''ease-out''     * ''ease-out''
     * ''ease-in-out''     * ''ease-in-out''
     * ''steps(pasos)''     * ''steps(pasos)''
-    * ''cubic-bezier(n,n,n,n)'': Para generar los valores se puede usar la siguiente página: [[https://cubic-bezier.com/|cubic-bezier]]+    * ''cubic-bezier(n,n,n,n)''
   * retardo: Cuanto tiempo en segundos tarda en empezar la transición.   * retardo: Cuanto tiempo en segundos tarda en empezar la transición.
  
-Mas información de la timing-function en: [[https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function|transition-timing-function - CSS | MDN]] y en [[https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp|CSS transition-timing-function property]]+Mas información de la timing-function en:  
 +  * [[https://tympanus.net/codrops/css_reference/timing-function_value/|<timing-function>]] 
 +  * [[https://cubic-bezier.com/|https://cubic-bezier.com/]] 
 +  * [[http://www.roblaplaca.com/examples/bezierBuilder/|CSS cubic-bezier Builder]] 
 +  * [[https://matthewlein.com/tools/ceaser|Ceaser - CSS Easing Animation Tool - Matthew Lein]] 
 +  * [[https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function|transition-timing-function - CSS | MDN]] 
 +  * [[https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp|CSS transition-timing-function property]]
  
 Por ejemplo: Por ejemplo:
Línea 256: Línea 267:
   transition-delay:2s;   transition-delay:2s;
 </sxh> </sxh>
- 
- 
  
  
Línea 267: Línea 276:
 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]]
 +  * 
 +
  
 Las animaciones constan de dos apartados distintos.  Las animaciones constan de dos apartados distintos. 
Línea 290: Línea 302:
                          
             .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 302: Línea 314:
                              
               50% {               50% {
-                transform: rotate(365deg);+                transform: rotate(360deg);
                 background-color: #1C4673;                 background-color: #1C4673;
               }               }
Línea 328: Línea 340:
   * ''animation-duration'': Duración en segundos.   * ''animation-duration'': Duración en segundos.
   * ''animation-timing-function'': La velocidad   * ''animation-timing-function'': La velocidad
-    * ''linear'': Velocidad constante. //e=v*t//+    * ''linear'': Velocidad constante. $e=v \cdot t$
     * ''ease''     * ''ease''
-    * ''ease-in'': Aceleración constante //e=½a*t²//+    * ''ease-in'': Aceleración constante $e=\frac{1}{2} \cdot a \cdot t^{2}$
     * ''ease-out''     * ''ease-out''
     * ''ease-in-out''     * ''ease-in-out''
Línea 343: Línea 355:
     * ''alternate-reverse'': Empieza en el 100% y avanza hacía el 0% y la 2º  vez lo hace del 0% al 100% y así sucesivamente.     * ''alternate-reverse'': Empieza en el 100% y avanza hacía el 0% y la 2º  vez lo hace del 0% al 100% y así sucesivamente.
   * ''animation-fill-mode'': Que CSS se aplica cuando acaba.   * ''animation-fill-mode'': Que CSS se aplica cuando acaba.
-    * ''none'' +    * ''none'': La animación antes de empezar o despues de acabar no tiene ningún estilo definido en la animación. 
-    * ''forwards'' +    * ''forwards'': Al acabar la animación se queda como en el último Frame. 
-    * ''backwards'' +    * ''backwards'': Antes de empezar la animación (por si hay un delay),  ya está  como en el primer Frame. 
-    * ''both'' +    * ''both'': Es unir ''forwards'' y ''backwards''. 
-  * ''animation-play-state'': Como empieza la animación+  * ''animation-play-state'': Como empieza la animación. Mas información en [[https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties/|How to Play and Pause CSS Animations with CSS Custom Properties]]
     * ''running'': Empieza ejecutándose     * ''running'': Empieza ejecutándose
     * ''paused'': Empieza pausada     * ''paused'': Empieza pausada
   * ''animation'': La unión de todas las anteriores   * ''animation'': La unión de todas las anteriores
 +
 +Mas información de la timing-function en: 
 +  * [[https://tympanus.net/codrops/css_reference/timing-function_value/|<timing-function>]]
 +  * [[https://cubic-bezier.com/|https://cubic-bezier.com/]]
 +  * [[http://www.roblaplaca.com/examples/bezierBuilder/|CSS cubic-bezier Builder]]
 +  * [[https://matthewlein.com/tools/ceaser|Ceaser - CSS Easing Animation Tool - Matthew Lein]]
 +  * [[https://developer.mozilla.org/es/docs/Web/CSS/animation-timing-function|animation-timing-function - CSS | MDN]]
 +  * [[https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp|CSS animation-timing-function Property]]
 +
  
 ==== JavaScript ==== ==== JavaScript ====
Línea 382: Línea 403:
 <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 389: Línea 410:
  
  
-@keyframes c-cuadrado-girar {+@keyframes animacion-girar {
   0% {   0% {
  transform: rotate(0deg);  transform: rotate(0deg);
Línea 396: Línea 417:
      
   100% {   100% {
- transform: rotate(365deg);+ transform: rotate(360deg);
  background-color: #1C4673;  background-color: #1C4673;
   }    } 
clase/daw/diw/2eval/tema08.1610039557.txt.gz · Última modificación: 2021/01/07 18:12 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