¿Animación de transición CSS3 en la carga?
https://stackoverflow.com/questions/6805482
-
25-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Es posible usar la animación de transición CSS3 en la carga de la página sin usar JavaScript?
Esto es algo 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
- Css3 transición-retraso, una forma de retrasar los efectos en los elementos. Solo funciona en el flotador.
- Marco de teclas CSS3, funciona en carga pero son extremadamente lentos. No es útil por eso.
- Transición CSS3 es lo suficientemente rápido pero no se anime en la carga de la página.
Solución
Tú pueden correr CSS animación en la carga de la página sin usar JavaScript; Solo tienes que usar Plazos CSS3.
Veamos un ejemplo...
Aquí hay una demostración de un menú de navegación que se desliza en su lugar utilizando CSS3 solamente:
@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 fotograma 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 es llamar a eso slideInFromLeft animación:
animation: 1s ease-out 0s 1 slideInFromLeft;
Arriba está la versión en taquigrafía, pero aquí está la versión detallada para la 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.
Otros consejos
Muy poco JavaScript es necesario:
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 decía "sin JavaScript", pero creo que vale la pena señalar que hay una solución fácil que involucra una línea de JavaScript.
Incluso podría ser JavaScript en línea, algo así:
<body onload="document.body.className += ' loaded';" class="fadein">
Ese es todo el JavaScript que se necesita.
Creo que he encontrado una especie de trabajo para la pregunta OP, en lugar de una transición que comenzó 'On. lo mismo que op).
Así que quería que el texto del cuerpo se desvaneciera desde el blanco (igual que el fondo del sitio) hasta el 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 de estilo 'ida', Pero todavía no sé 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 alguna razón, esto no funciona para .class solamente #id's (al menos no en el mío)
Espero que esto ayude, ¡ya que sé que este sitio me ayuda mucho!
Bueno, esta es complicada.
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 un de presentación Capa a diferentes "banderas" (clases, IDS, estados).
Por defecto, CSS/DOM no proporciona ningún tipo de estado "en carga" para que los CSS lo usen. Si quisiera/pudiera usar JavaScript, asignaría una clase a body o algo para activar algunos 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 con la suposición de que "cerca" 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 estamos suponiendo que los navegadores modernos se vuelvan progresivamente, por lo que nuestro último elemento hará último, por lo que este CSS se activará al final.
Similar a la solución de @Rolf, pero omita la referencia a funciones externas o jugando con clase. Si la opacidad debe permanecer fija a 1 una vez cargada, simplemente use el script 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 establece la opacidad al estado inicial (es decir, 0)
El único problema es que esto no funciona con los elementos SPAN o DIV, ya que no tienen un evento de trabajo en funcionamiento
Comience con flotación de cuerpo de lo que comenzará cuando el mouse se mueva por primera vez en la pantalla, que se encuentra principalmente dentro de un segundo después de la llegada, el problema aquí es que se revertirá cuando esté fuera de la pantalla.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
Eso es lo mejor que puedo pensar: 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 hay flotación, por lo que el usuario no verá el contenido a menos que lo toque. - Rich Bradshaw
Ok, he logrado lograr una animación cuando la página se carga usando solo transiciones CSS (¡más o menos!):
He creado 2 hojas de estilo CSS: la primera es cómo quiero el estilo HTML antes de la animación ... y la segunda es cómo quiero que se haya llevado a cabo la página después de que se haya llevado a cabo la animación.
No entiendo completamente cómo he logrado esto, pero solo funciona cuando los dos archivos CSS (ambos en el encabezado de mi documento) están separados por algún 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 cargando pero no se muestra nada (¿tal vez solo 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 me equivoque, pero pensé que los navegadores que no admiten las transiciones de CSS no deberían tener ningún problema, ya que deberían saltar directamente al segundo archivo CSS sin demora o duración.
Estoy interesado en conocer las opiniones sobre cuán amigable con los motores de búsqueda es este método. Con mi sombrero negro encendido, supongo que podría llenar una página con palabras clave y aplicar un retraso de 9999 en su opacidad.
Me interesaría saber cómo los motores de búsqueda tratan con el atributo de retardo de transición y si, utilizando el método anterior, incluso verían los enlaces e información en la página.
¡Más importante aún, realmente 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 pueda generar algunas opiniones y opiniones si nada más!
Si alguien más tuvo problemas para hacer dos transiciones a la vez, esto es lo que hice. Necesitaba texto para venir de arriba a abajo en la carga de la página.
Html
<body class="existing-class-name" onload="document.body.classList.add('loaded')">
Html
<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>
CSS
.text-over-image {
position: absolute;
background-color: rgba(110, 186, 115, 0.8);
color: #eee;
left: 0;
width: 100%;
padding: 10px;
opacity: 0;
bottom: 100%;
-webkit-transition: opacity 2s, bottom 2s;
-moz-transition: opacity 2s, bottom 2s;
-o-transition: opacity 2s, bottom 2s;
transition: opacity 2s, bottom 2s;
}
body.loaded .text-over-image {
bottom: 0;
opacity: 1;
}
No sé por qué seguí tratando de usar 2 declaraciones de transición en 1 selector y (no realmente) pensando que usaría ambos.
CSS solo con un retraso de 3s
Algunos puntos para llevar aquí:
- múltiples animaciones en una llamada
- Creamos un Espere Animación que simplemente retrasa la real (la segunda en nuestro caso).
Código:
header {
animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}
@keyframes wait {
from { transform: translateY(20px); }
to { transform: translateY(20px); }
}
@keyframes slideInFromBottom {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
En realidad, no, como se aplica CSS lo antes posible, pero los elementos pueden no ser dibujados todavía. 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, por ejemplo, requeriría CSS que oculta el contenido para entregar. Si el usuario no tiene transiciones CSS3, entonces nunca lo vería.
Recomiendo usar jQuery (para facilitar el uso +, es posible que desee agregar animación para otros UAS) 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 animado en lugar del segundo CSS en los navegadores heredados si es necesario.
