La propiedad DOM Style TransitionTimingFunction permite que un efecto de transición cambie la velocidad a lo largo de su duración. El efecto de transición proporciona una forma de controlar la velocidad de la animación al cambiar las propiedades.
Sintaxis:
- Para establecer la propiedad:
object.style.transitionTimingFunction = "ease|linear|ease-in| ease-out|ease-in-out"
- Para obtener la propiedad:
object.style.transitionTimingFunction
Valores devueltos: Devuelve una string que representa la propiedad de función de tiempo de transición de un elemento
Valores de propiedad:
- facilidad: Especifica un efecto de transición que comienza lentamente, luego rápido, luego lento.
- lineal: Especifica un efecto de transición con la misma velocidad de principio a fin.
- Facilidad de entrada: especifica un efecto de transición con un comienzo lento.
- Eaceleración: especifica un efecto de transición con un final lento.
- Facilidad de entrada y salida: especifica un efecto de transición con un comienzo y un final lentos.
Ejemplo 1: Este ejemplo describe el valor de propiedad lineal.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style transitionTimingFunction property
</title>
<style>
#GFG {
background-color: green;
width: 150px;
height: 150px;
overflow: auto;
/* For Safari Browser */
-webkit-transition: all 2s;
transition: all 2s;
}
#GFG:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button onclick = "myGeeks()">
Click Here!
</button>
<br><br>
<div id = "GFG">
</div>
<script>
function myGeeks() {
/* For Safari Browser */
document.getElementById("GFG").style.WebkitTransitionTimingFunction
= "linear";
document.getElementById("GFG").style.transitionTimingFunction
= "linear";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe el valor de propiedad de entrada gradual.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style transitionTimingFunction property
</title>
<style>
#GFG {
background-color: green;
width: 150px;
height: 150px;
overflow: auto;
/* For Safari Browser */
-webkit-transition: all 2s;
transition: all 2s;
}
#GFG:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button onclick = "myGeeks()">
Click Here!
</button>
<br><br>
<div id = "GFG">
</div>
<script>
function myGeeks() {
/* For Safari Browser */
document.getElementById("GFG").style.WebkitTransitionTimingFunction
= "ease-in";
document.getElementById("GFG").style.transitionTimingFunction
= "ease-in";
}
</script>
</body>
</html>
Producción:
Nota: Utilice WebkitTransitionTimingFunction como palabra clave en el navegador Safari.
Navegadores compatibles: El navegador compatible con HTML | La propiedad DOM Style TransitionTimingFunction se encuentra a continuación:
- Google Chrome 26.0 y superior
- Borde 12 y superior
- Internet Explorer 10.0 y superior
- Mozilla Firefox 16.0 y superior
- Ópera 12.1 y superior
- Safari 9 y superior
Publicación traducida automáticamente
Artículo escrito por kartikgoel1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA