texto - transiciones css ejemplos
animación de transición css3 en carga? (8)
¿Es posible usar la animación de transición CSS3 en la carga de la página sin usar Javascript?
Esto es lo que quiero, pero en la carga de la página:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
Lo que encontré hasta ahora
- Retraso de transición CSS3 , una forma de retrasar los efectos en los elementos. Solo funciona en hover.
- CSS3 Keyframe , funciona en carga pero es extremadamente lento. No es útil debido a eso.
- La transición de CSS3 es lo suficientemente rápida pero no se anima en la carga de la página.
Bueno, esto es complicado.
La respuesta es "no realmente".
CSS no es una capa funcional. No tiene conciencia de lo que sucede o cuándo. Se usa simplemente para agregar una capa de presentación a diferentes "banderas" (clases, identificadores, estados).
Por defecto, CSS / DOM no proporciona ningún tipo de estado "en carga" para que CSS lo use. Si quisiera / pudiera usar JavaScript, asignaría una clase a un body o algo para activar algo de CSS.
Dicho esto, puedes crear un truco para eso. Daré un ejemplo aquí, pero puede o no ser aplicable a su situación.
Estamos operando bajo el supuesto de que "cerrar" es "lo suficientemente bueno":
<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
<!-- A whole bunch of HTML here... -->
<div class="onLoad">OMG, I''ve loaded !</div>
</body>
</html>
Aquí hay un extracto de nuestra hoja de estilo CSS:
.onLoad
{
-webkit-animation:bounceIn 2s;
}
También asumimos que los navegadores modernos rinden de forma progresiva, por lo que nuestro último elemento será el último, por lo que este CSS se activará al final.
Creo que encontré una especie de solución para la pregunta de OP, en lugar de una transición que comienza ''on.load'' de la página. Encontré que usar una animación para un fundido de opacidad tenía el mismo efecto (estaba buscando lo mismo que OP).
Así que quería que el texto del cuerpo se desvaneciese de blanco (igual que el fondo del sitio) a color de texto negro en la carga de la página, y solo he estado codificando desde el lunes, así que estaba buscando un código de estilo al estilo ''on.load''. pero aún no conozco a JS, así que aquí está mi código que funcionó bien para mí.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
Y por cualquier razón, esto no funciona para .class solo #id ''s (al menos no en el mío)
Espero que esto ayude, ya que sé que este sitio me ayuda mucho.
Empiece con el movimiento del cuerpo de modo que se inicie cuando el mouse se mueva por primera vez en la pantalla, que se produce principalmente en un segundo después de la llegada, el problema aquí es que se invertirá cuando salga de la pantalla.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
eso es lo mejor que se me ocurre: http://jsfiddle.net/faVLX/
pantalla completa: http://jsfiddle.net/faVLX/embedded/result/
Editar ver comentarios a continuación:
Esto no funcionará en ningún dispositivo con pantalla táctil porque no existe el vuelo estacionario, por lo que el usuario no verá el contenido a menos que lo toque. - Rich Bradshaw
En realidad, no, ya que CSS se aplica lo antes posible, pero es posible que los elementos aún no se hayan dibujado. Podría adivinar un retraso de 1 o 2 segundos, pero esto no se verá bien para la mayoría de las personas, dependiendo de la velocidad de su internet.
Además, si desea desvanecer algo en, por ejemplo, requeriría CSS que oculta el contenido que se entregará. Si el usuario no tiene transiciones CSS3, entonces nunca lo verán.
Recomiendo usar jQuery (para facilitar el uso + es posible que desee agregar animaciones para otros UA) y algunos JS como este:
$(document).ready(function() {
$(''#id_to_fade_in'')
.css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it''s not hidden for users with no JS (Googlebot for instance!)
.delay(200) // Wait for a bit so the user notices it fade in
.css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required.
});
Junto con las transiciones agregadas en el CSS. Esto tiene la ventaja de permitir fácilmente el uso de animaciones en lugar del segundo CSS en los navegadores heredados si es necesario.
Ok, he logrado lograr una animación cuando la página se carga utilizando solo transiciones CSS (¡más o menos!):
He creado 2 hojas de estilo css: la primera es cómo quiero que el estilo html antes de la animación ... y el segundo es cómo quiero que la página se encargue de que la animación se haya llevado a cabo.
No entiendo completamente cómo lo he logrado, pero solo funciona cuando los dos archivos css (ambos en el encabezado de mi documento) están separados por algunos javascript de la siguiente manera.
He probado esto con Firefox, Safari y Opera. A veces, la animación funciona, a veces se salta directamente al segundo archivo CSS y, a veces, la página parece estar cargándose pero no se muestra nada (¿tal vez soy yo?)
<link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>
<script type=''text/javascript''>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" />
Aquí hay un enlace a mi sitio web de trabajo en progreso: http://www.hankins-design.co.uk/beta2/test/index.html
Tal vez estoy equivocado, pero pensé que los navegadores que no admiten transiciones CSS no deberían tener ningún problema, ya que deberían pasar directamente al segundo archivo CSS sin demora ni duración.
Estoy interesado en conocer las opiniones sobre cómo es este método amigable para los motores de búsqueda. Con mi sombrero negro, supongo que podría llenar una página con palabras clave y aplicar un retraso de 9999s en su opacidad.
Me interesaría saber cómo los motores de búsqueda manejan el atributo de demora de transición y si, utilizando el método anterior, incluso verían los enlaces y la información en la página.
Más importante aún, me gustaría saber por qué esto no es consistente cada vez que se carga la página y cómo puedo rectificar esto.
Espero que esto genere algunos puntos de vista y opiniones, ¡nada más!
Puede ejecutar una animación CSS en la carga de la página sin usar ningún JavaScript; solo tiene que usar fotogramas clave CSS3 .
Veamos un ejemplo...
Aquí hay una demostración de un menú de navegación deslizándose en su lugar usando solo CSS3 :
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
header {
/* This section calls the slideInFromLeft animation we defined above */
animation: 1s ease-out 0s 1 slideInFromLeft;
background: #333;
padding: 30px;
}
/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</header>
Descomponerlo...
Las partes importantes aquí son la animación de slideInFromLeft clave que llamamos slideInFromLeft ...
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
... que básicamente dice "al principio, el encabezado estará fuera del borde izquierdo de la pantalla por su ancho completo y al final estará en su lugar".
La segunda parte llama a esa animación slideInFromLeft :
animation: 1s ease-out 0s 1 slideInFromLeft;
Arriba está la versión abreviada, pero aquí está la versión detallada para mayor claridad:
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
Puede hacer todo tipo de cosas interesantes, como deslizarse en el contenido o llamar la atención sobre las áreas.
Se necesita muy poco Javascript
window.onload = function() {
document.body.className += " loaded";
}
Ahora el CSS:
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
#body.loaded .fadein {
opacity: 1;
}
Sé que la pregunta dice "sin Javascript", pero creo que vale la pena señalar que hay una solución fácil que implica una línea de Javascript.
Incluso podría estar en línea Javascript, algo así:
<body onload="document.body.className += '' loaded'';">
Eso es todo el JavaScript que se necesita.
Similar a la solución de @Rolf, pero omita la referencia a funciones externas o jugando con la clase. Si la opacidad debe permanecer fija en 1 una vez cargada, simplemente use la secuencia de comandos en línea para cambiar directamente la opacidad a través del estilo. Por ejemplo
<body class="fadein" onload="this.style.opacity=1">
donde CSS sytle "fadein" se define por @ Rolf, definiendo la transición y configurando la opacidad al estado inicial (es decir, 0)
la única pega es que esto no funciona con elementos SPAN o DIV, ya que no tienen un evento onload que funcione