3.2 KiB
| title | localeTitle |
|---|---|
| CSS3 Transitions | Transições CSS3 |
Transições CSS3
O uso de CSS3 Transitions pode ser útil se você quiser que seu aplicativo ou sua página da Web seja mais dinâmico e bonito.
De fato, as transições permitem que você altere os valores de propriedade ( width , color ,…) de forma suave .
A propriedade de transition é uma propriedade abreviada para propriedade de transition-property , transition-duration transition-timing-function , transition-timing-function transition-delay , a sintaxe é a seguinte:
transition: transition-property transition-duration transition-timing-function transition-delay
Por exemplo :
transition: width 2s ease-in-out 1s;
Descrição das propriedades
transition-property
Especifique o nome da propriedade para a qual você deve aplicar uma transição:
background-colorcolorwidthheightmarginborder-radius- E assim por diante !
Por exemplo :
transition-property: width; /* means the transition applies on the width */
transition-duration
Especifique o número de segundos ou milissegundos que a transição deve demorar :
Por exemplo :
transition-duration: 2s /* means the transition effect last 2s */
transition-timing-function
Especifique a curva de velocidade do efeito de transição. Assim, você pode alterar a velocidade da sua transição ao longo de sua duração .
Aqui estão os valores mais usados:
lineareaseease-inease-outease-in-outcubic-bezier(n, n, n, n)
Por exemplo :
transition-timing-function: linear
NB: Todos os valores acima são de fato específicos cubic-bezier . linear , por exemplo, é equivalente a cubic-bezier(0.25,0.1,0.25,1)
Você pode experimentar e aprender mais sobre Cubic Bezier aqui
transition-delay
Especifique em segundos ou milissegundos quando a transição será iniciada .
Por exemplo :
transition-delay: 1s /* means wait 1s before the transition effect start */
Como usar transições?
Você pode escrever uma transição de duas maneiras:
Usando a propriedade abreviada ( transition )
div {
width: 200px;
transition: all 1s ease-in-out;
}
div:hover {
width: 300px;
}
Dando a todas as propriedades de transição um valor
div {
width: 200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
NB: Ambos os exemplos são equivalentes
Exemplos
Aqui estão algumas canetas simples contendo transições simples: