La propiedad will-change es el reemplazo de la animación en algunos casos, toda la animación se verá tan nerviosa algunas veces cuando la página tardó en cargarse. Pero en el caso del cambio de voluntad, esas cosas animadas funcionarán sin problemas.
Sintaxis:
will-change: auto | <animateable-feature>#
Valores de propiedad:
- auto: aquí el desarrollador debe aplicar las heurísticas y optimizaciones que normalmente hace.
- <animateable-feature>: aquí el desarrollador puede definir qué tipo de animación desea mostrar.
Ejemplo: Este ejemplo ilustra la propiedad will-change.
<!DOCTYPE html>
<html>
<head>
<title>
CSS | will-change property
</title>
<style>
h1 {
color: green;
}
.left{
will-change: transform;
transition: 1s;
}
.left:hover {
transform: rotateX(45deg);
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS | will-change property</h4>
<div>
<img class="left" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
alt="Sample image">
<img class="right" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
alt="Sample image">
</div>
</center>
<body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de cambio de CSS se enumeran a continuación:
- Google Chrome
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA