Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
clase:daw:diw:2eval:tema08 [2021/01/10 14:20] admin [Transiciones] |
clase:daw:diw:2eval:tema08 [2022/02/13 19:57] admin |
||
---|---|---|---|
Línea 22: | Línea 22: | ||
Mas información: | Mas información: | ||
- | * [[https:// | + | |
- | * [[https:// | + | * [[https:// |
- | * [[https:// | + | * [[https:// |
- | * [[https:// | + | * [[https:// |
+ | * CSS | ||
+ | | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
Línea 232: | Línea 237: | ||
* duracion: Duración en segundos de la transición | * duracion: Duración en segundos de la transición | ||
* timing-function: | * timing-function: | ||
- | * '' | + | * '' |
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
* '' | * '' | ||
Línea 241: | Línea 246: | ||
* 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:// | + | Mas información de la timing-function en: |
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
Por ejemplo: | Por ejemplo: | ||
Línea 257: | Línea 268: | ||
</ | </ | ||
- | |||
- | Mas información sobre la timing-function en: | ||
- | * [[https:// | ||
- | * [https:// | ||
- | * [[http:// | ||
- | * [[https:// | ||
Línea 271: | Línea 276: | ||
Mas información: | Mas información: | ||
* [[http:// | * [[http:// | ||
- | * [[https://www.sitepoint.com/top-9-animation-libraries-use-2016/|Top 9 Animation Libraries | + | * [[https://css-tricks.com/css-animation-libraries/ |
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * | ||
+ | |||
Las animaciones constan de dos apartados distintos. | Las animaciones constan de dos apartados distintos. | ||
Línea 294: | Línea 302: | ||
| | ||
.c-cuadrado--girar { | .c-cuadrado--girar { | ||
- | animation-name: | + | animation-name: |
animation-duration: | animation-duration: | ||
} | } | ||
| | ||
| | ||
- | @keyframes | + | @keyframes |
0% { | 0% { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
Línea 306: | Línea 314: | ||
| | ||
50% { | 50% { | ||
- | transform: rotate(365deg); | + | transform: rotate(360deg); |
background-color: | background-color: | ||
} | } | ||
Línea 332: | Línea 340: | ||
* '' | * '' | ||
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
* '' | * '' | ||
Línea 351: | Línea 359: | ||
* '' | * '' | ||
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
* '' | * '' | ||
* '' | * '' | ||
+ | |||
+ | Mas información de la timing-function en: | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
==== JavaScript ==== | ==== JavaScript ==== | ||
Línea 386: | Línea 403: | ||
<sxh css> | <sxh css> | ||
.c-cuadrado--girar { | .c-cuadrado--girar { | ||
- | animation-name: | + | animation-name: |
animation-duration: | animation-duration: | ||
animation-iteration-count: | animation-iteration-count: | ||
Línea 393: | Línea 410: | ||
- | @keyframes | + | @keyframes |
0% { | 0% { | ||
transform: rotate(0deg); | transform: rotate(0deg); | ||
Línea 400: | Línea 417: | ||
| | ||
100% { | 100% { | ||
- | transform: rotate(365deg); | + | transform: rotate(360deg); |
background-color: | background-color: | ||
} | } |