html - solucion - ¿Hay alguna manera de ralentizar el efecto de vuelo estacionario?
una pagina web esta causando que el navegador este lento (4)
Puede agregar transiciones css3:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
¿Hay alguna manera de reducir la velocidad de un efecto estacionario? Tengo un efecto de desplazamiento sobre mi sitio (eliminado) que muestra texto al pasar el mouse sobre las imágenes. Quiero ralentizar el efecto un poco. Es un poco discordante lo rápido que cambia la imagen.
¿Como podría hacerlo?
Si lo desea, puede usar jQuery .fadeIn () http://api.jquery.com/fadeIn/
.fadeIn ([duración] [, devolución de llamada])
cadena de duración o número que determina cuánto tiempo se ejecutará la animación.
función de devolución de llamada para llamar una vez que se completa la animación.
Depende de cómo está mostrando el texto. Si está cambiando una propiedad CSS, puede hacerlo con transiciones CSS3 . A continuación hay un ejemplo.
HTML:
<div id="A"></div><div id="B"></div>
CSS:
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Editar: David Thomas me ha dicho que no puede cambiar la pantalla con transiciones. He actualizado lo anterior para usar opacidad.
Sé que esto es bastante tarde, pero mire las animaciones de CSS3. Uso una animación en una de las pantallas de carga de Garry''s Mod.
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>
Sé que no es exactamente el resultado que buscas, pero estoy seguro de que tú y otros pueden encontrarlo útil.