transición
Una transición básica que involucra propiedades CSS es definir y mover un elemento desde su estado de reposo (por ejemplo, un fondo azul oscuro) a su estado activo o flotante (por ejemplo, un fondo azul claro).
Las transformaciones se pueden usar junto con transformaciones (así como generar eventos como :hover o :focus) para crear algunas animaciones. Difumine un color de fondo, deslice un elemento y gire un objeto, todo con transiciones CSS.
El siguiente es el contenido citado: #navegar a{ color de fondo:rojo } |
Algunos parámetros para convertir
propiedad de transición
Especifique el nombre de la propiedad CSS de la transformación. Por ejemplo, en el ejemplo anterior, la transformación se aplica a la propiedad de color de fondo.
duración de la transición
Definir el tiempo que lleva la conversión (el tiempo que lleva cambiar del atributo antiguo al nuevo atributo)
función de sincronización de transición
Puede entenderse como un efecto excesivo. Especifica el valor intermedio durante la conversión. Se puede especificar con cúbico-bezier. Por supuesto, existen varios valores integrados de uso común: facilidad | lineal | facilidad de entrada |
retraso de transición
Esto es más fácil de entender, es el tiempo de retraso de la conversión. El tiempo puede ser un número entero positivo, un número entero negativo o cero. Cuando es distinto de cero, la unidad debe establecerse en s (segundos) o ms (milisegundos). Cuando es un número negativo, la acción convertida se mostrará desde. ese momento y la acción anterior se truncará.
Nota: La parte del parámetro se agregó durante la traducción y no está en el texto original.
Soporte del navegador
Tan interesante como el atributo de transformación, pero actualmente solo es compatible con los navegadores WebKit. -moz-transition ya está disponible en las versiones recientes de Firefox 3.7. También puedes agregar -moz-transition a tu CSS para futuras mejoras. Incluso puedes agregar una propiedad sin el prefijo privado, por si acaso.
Animación
La animación es donde CSS 3 resulta más útil. Puede combinar todos los elementos que analizamos anteriormente con propiedades de animación como duración de la animación, nombre de la animación y función de sincronización de la animación para crear efectos como animaciones Flash: CSS puro.
El siguiente es el contenido citado: #rotar { |
Este fantástico código de animación CSS y una demostración en línea se pueden ver en el sitio web del webkit . La demostración se puede ver en cualquier sitio web, pero el efecto de animación solo es visible en la versión nocturna de WebKit en Mac os (Snow Leopard). Se ve exactamente como en el video de arriba, y si estás en Mac OS (versión Snow Leopard), creo que vale la pena instalar un webkit para ver el efecto por ti mismo (es realmente genial). Los usuarios del sistema Windows temporalmente no pueden apreciar este efecto.
Algunos parámetros de animación.
Los parámetros de animación son algo similares a los de traducción, por lo que si comprende los parámetros de traducción, no es difícil entenderlos aquí.
nombre-animación
El nombre de la animación.
duración de la animación
Defina el tiempo necesario para que la animación se reproduzca una vez. El valor predeterminado es 0;
función de sincronización de animación
Defina la forma en que se reproduce la animación. La configuración de los parámetros es similar a la función de sincronización de transición.
retardo de animación
Definir cuándo comienza la animación.
animación-iteración-recuento
Defina el número de bucles, infinito significa tiempos ilimitados. El valor predeterminado es 1.
-webkit-animación-dirección
La dirección de reproducción de la animación, dos valores, el valor predeterminado es normal. En este momento, cada ciclo de animación se reproducirá hacia adelante. El otro valor es alternativo, entonces los tiempos pares se reproducirán hacia adelante y los tiempos impares se reproducirán en dirección inversa.
Soporte del navegador
Lamentablemente, actualmente, sólo unos pocos navegadores admiten animaciones CSS. Las animaciones CSS 2D funcionan en Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira y otros navegadores Webkit. Safari 4 (Snow Leopard) admite animación 3D.