Transitions
-
Transitions
- Sintaxe: transition: tempo, delay, timing-function (ease-out, linear).
- Aplicada dentro da classe principal, essa transição será aplicada a todas as animations a ocorrer com o elemento dessa classe.
- They transition an element from one state to another, in a certain way, for a certain amont of time.
- Por exemplo, temos o .btn com transition: 1s e um .btn:hover com mudança de background de red para blue e um transform: rotate(360deg), que irá rotacionar o botão 360 graus. Essas duas animações irão acontecer devagar, com uma transição de 0% a 100% de 1s.
- Também é possível aplicar a transition a somente um elemento: transition: background 1s, transform 0.3s. Com isso o background muda para blue em 1s e a rotação de 360 graus será em 0.3s.
- ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- linear - specifies a transition effect with the same speed from start to end
- ease-in - specifies a transition effect with a slow start
- ease-out - specifies a transition effect with a slow end
- ease-in-out - specifies a transition effect with a slow start and end
- cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
Examples: Transitions