texto - keyframes css3 ejemplos
¿Cómo evitar que la animación CSS de fotogramas clave se ejecute en la carga de la página? (4)
Tengo un div en el que animo el contenido:
#container {
position: relative;
width: 100px;
height: 100px;
border-style: inset;
}
#content {
visibility: hidden;
-webkit-animation: animDown 1s ease;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
background-color: lightgreen;
}
#container:hover #content {
-webkit-animation: animUp 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
100% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
}
<div id="container">
<div id="content"></div>
</div>
El contenido del control deslizante se desliza dentro del contenedor div. Mi problema es que, cuando actualizo la página, y la página carga la animación de # contenido, se ejecutará animación animada, y preferiría que se ejecutara solo después de un evento de desplazamiento.
¿Hay alguna manera de hacer esto CSS puro, o tengo que encontrar algo en JS?
¿Hay alguna manera de hacer esto CSS puro?
Sí, absolutamente: mira el tenedor http://jsfiddle.net/5r32Lsme/2/ Realmente no hay necesidad de JS.
y preferiría que se ejecutara solo después de un evento de vuelo estacionario.
Entonces, debes decirle a CSS lo que sucede cuando NO es un evento de vuelo estacionario, en tu ejemplo:
#container:not(:hover) #content {
visibility: hidden;
transition: visibility 0.01s 1s;
}
Pero hay dos cosas a tener en cuenta:
1) El retraso de transición anterior debe coincidir con la duración de tu animación
2) No puede usar la propiedad que usa para ocultar la animación onLoad en la animación. Si necesita visibilidad en la animación, oculte la animación inicialmente como, por ejemplo,
#container:not(:hover) #content {
top: -8000px;
transition: top 0.01s 1s;
}
Una nota al margen:
Se recomienda poner propiedades CSS nativas después de las prefijadas, por lo que debería ser
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
y ahora hay una transformación nativa
-webkit-transform: translateY(0);
transform: translateY(0);
Siempre configuro la clase de precarga en el cuerpo con el valor de tiempo de animación 0 y funciona bastante bien. Tengo algunas transiciones hacia atrás, así que también tengo que eliminar la animación de carga. Lo resolví estableciendo temporalmente el tiempo de animación en 0. Puedes cambiar las transiciones para que coincidan con las tuyas.
HTML
... <body class="preload">...
CSS está configurando la animación a 0s
body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}
JS eliminará la clase después de un poco de retraso para que las animaciones puedan suceder en el tiempo normal :)
setTimeout(function(){
document.body.className="";
},500);
Animación de rotación que (aparece) no se ejecuta hasta que sea necesario.
El CSS a continuación permite flechas hacia arriba y hacia abajo para mostrar los elementos del menú. La animación no parece ejecutarse en la carga de la página, pero realmente funciona.
@keyframes rotateDown {
from { transform: rotate(180deg); }
to { transform: rotate(0deg); }
}
@keyframes rotateUp {
from { transform: rotate(180deg); }
to { transform: rotate(0deg); }
}
div.menu input[type=''checkbox''] + label.menu::before {
display :inline-block;
content : "▼";
color : #b78369;
opacity : 0.5;
font-size : 1.2em;
}
div.menu input[type=''checkbox'']:checked + label.menu::before {
display : inline-block;
content : "▲";
color : #b78369;
opacity : 0.5;
font-size : 1.2em;
}
div.menu input[type=''checkbox''] + label.menu {
display : inline-block;
animation-name : rotateDown;
animation-duration : 1ms;
}
div.menu input[type=''checkbox'']:checked + label.menu {
display : inline-block;
animation-name : rotateUp;
animation-duration : 1ms;
}
div.menu input[type=''checkbox''] + label.menu:hover {
animation-duration : 500ms;
}
div.menu input[type=''checkbox'']:checked + label.menu:hover {
animation-duration : 500ms;
}
De arriba a abajo:
- Crea las rotaciones. Para esto hay dos ... uno para la flecha hacia abajo y otro para la flecha hacia arriba. Se necesitan dos flechas porque, después de la rotación, vuelven a su estado natural. Por lo tanto, la flecha hacia abajo se inicia y gira hacia abajo, mientras que la flecha hacia arriba se inicia hacia abajo y gira hacia arriba.
- Crea las pequeñas flechas. Esta es una implementación directa de :: antes
- Ponemos la animación en la etiqueta. No hay nada especial, excepto que la duración de la animación es 1 ms.
- El mouse maneja la velocidad de la animación . Cuando el mouse se desplaza sobre el elemento, la duración de la animación se establece en el tiempo suficiente para que parezca uniforme.
Solución 1 - Agregar animación en el primer vuelo estacionario
Probablemente la mejor opción es no poner la animación hacia abajo hasta que el usuario se haya detenido sobre el container por primera vez.
Esto implica escuchar el evento mouseover luego agregar una clase con la animación en ese punto y eliminar el detector de eventos. El principal inconveniente (potencial) de esto es que depende de Javascript.
;(function(){
var c = document.getElementById(''container'');
function addAnim() {
c.classList.add(''animated'')
// remove the listener, no longer needed
c.removeEventListener(''mouseover'', addAnim);
};
// listen to mouseover for the container
c.addEventListener(''mouseover'', addAnim);
})();
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
/* This gets added on first mouseover */
#container.animated #content {
-webkit-animation:animDown 1s ease;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Solución 2: reproducción de la animación oculta
Otra forma de evitar esto es ocultar inicialmente el elemento, asegurarse de que la animación se reproduce mientras está oculta y luego hacerla visible. La desventaja de esto es que el tiempo podría estar un poco apagado y se hace visible demasiado temprano, y también el vuelo estacionario no está disponible de inmediato.
Esto requiere un Javascript que espera la duración de la animación y solo entonces hace #content visible. Esto significa que también debe establecer la opacity inicial en 0 para que no aparezca en la carga y también eliminar la visibility de los fotogramas clave. De todos modos, estos no están haciendo nada:
// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
document.getElementById(''content'').style.visibility = ''visible'';
}, 1100);
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
visibility:hidden;
-webkit-animation:animDown 1s ease;
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Solución 3 - Usa transiciones
En su escenario, puede hacer este CSS solo reemplazando los keyframe con una transition lugar, por lo que comienza con opacity:0 y solo el elemento emergente tiene un cambio en la opacity y la transform :
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
/* initial state - hidden */
opacity:0;
/* set properties to animate - applies to hover and revert */
transition:opacity 1s, transform 1s;
}
#container:hover #content {
/* Just set properties to change - no need to change visibility */
opacity:1;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
<div id="container">
<div id="content"></div>
</div>