Qu'est-ce que l'interpolation dans css?

Question

Qu'est-ce que tweening exactement dans CSS et où l'utilisons-nous. Quand j'ai cherché en ligne, tout ce que je savais, c'est que «l'option pose-à-pose consiste à créer quelques images-clés tout au long de la séquence, puis à combler les lacunes plus tard. ". Quelqu'un pourrait-il m'expliquer avec un exemple de fragment de code?

Answer 1

L'interpolation n'est pas un terme trop souvent utilisé dans CSS. Comme vous l'avez découvert, il a ses racines dans l'animation par ordinateur. Plutôt que de dire exactement au programme comment restituer chaque image, l'animateur dirait au programme à quelle position se trouvent les objets à deux "images-clés" et le programme déterminerait comment transiter les objets entre ces deux points.

En CSS, nous utilisons généralement le terme «animer», mais les concepts sont les mêmes. MDN a une bonne introduction here. Cet exemple simple (à partir de l'article) montre comment faire glisser un élément <p> à partir du bord droit de la fenêtre du navigateur:

p { 
    animation-duration: 3s; 
    animation-name: slidein; 
} 

@keyframes slidein { 
    from { 
    margin-left: 100%; 
    width: 300%; 
    } 

    to { 
    margin-left: 0%; 
    width: 100%; 
    } 
}