tranform e transition

Olá Jaqueline, tudo bem?

Sobre estas propriedades vou colocar alguns exemplos de cada uma e suas aplicações

A propriedade Transform nos permite alterações em elementos HTML, incluindo rotação, inclinações e alteração da escala. Transformações são disparadas quando um elemento muda de estado, tais como clicar com o mouse (on mouse click) e posicionar o cursor do mouse no elemento (on mouse hover).

Exemplo:

div:hover {
  transform: scale(1.2);
}

Um valor de 2, por exemplo, vai dobrar o tamanho do elemento. Um valor de 0.5, vai encolher o elemento para metade do seu tamanho original.

Com a propriedade Transition, ocorre a transição suave entre esses estados do elemento. Você consegue definir o tempo de execução, o delay, quais atributos serão afetados pela transição. Mas você não consegue definir o que deve ocorrer entre o estado inicial e final de uma transição, somente como ela deve iniciar e terminar. Por exemplo:

Inicie com a cor azul, termine com a cor vermelha e essa transição deve ter um tempo de 400ms.

Inicie com cor azul, termine com a cor de fundo vermelha e a cor da fonte branca, a transição do background deve demorar 300ms enquanto a da cor aconteça em 2s.

Poderá aplicar o transition-duration que especifica o intervalo de tempo da transição.

Pode ser em s (segundos) ou ms (milisegundos).

Exemplo

div {
  transition-property: background-color;
  transition-duration: 300ms;

}

Segue abaixo alguns materiais que falam mais sobre estas propriedades:

• http://meleu.github.io/blog/2020/04/17/css-transition-transform

• https://medium.com/@eduagni/css3-transform-e-transition-af86fe5dca4b

• https://pt.stackoverflow.com/questions/59044/qual-a-diferen%C3%A7a-entre-animation-e-transition-css

Espero que tenha ajudado,

Até mais