Transição em um elemento ao dar zoom na página

[Diéssica 140]

Ao darmos zoom em uma página aleatória na internet, o width assume, consequentemente, outros valores dinamicamente. O CSS3 tornou isso, resumidamente, mais legal de se fazer. Utilizamos o width, do transition-property.

O código é simples:

transition: width .3s ease;

(Talvez seja necessário utilizar os prefixos -moz- e -webkit-)
Sendo respectivamente transition-property, transition-duration e transition-timing-function — que assume outros valores: linear, ease, ease-in, ease-out, ease-in-out e cubic-bezier.

Um exemplo do uso está na busca do CSS-Tricks. Eu utilizo 90% lá, e na minha opinião, a transição (de segundos) torna a navegação bem mais agradável e leve. Talvez seja bobo, mas os clientes — e usuários como eu — aprovam. :)

E a "técnica" fica mais interessante ainda se trabalhada em um site responsivo. É no mínimo interessante para estudos.

Deixo a minha dica/contribuição aleatória de um dia a dia de desenvolvimento. :bye:
:seta: https://developer.mozilla.org/pt-BR/docs/CSS/transition

[Diéssica 140]

Outro exemplo é o Locaweb Developer Network :seta: http://developer.locaweb.com.br/

[José da Silvasauro 7]

desculpas mas não entendi para que funciona. :unsure:

[Diéssica 140]

Dê CTRL + no site da Mozilla Thimble :seta: https://thimble.webmaker.org/en-US/ — vai ver que os elementos se posicionarão dinamicamente conforme assumem outros valores maiores de comprimento: largura, font-size; enfim, ele suaviza essa transição.

Em tempos de acessibilidade, muitos dão zoom na página para facilitar a leitura de artigos. Com toda a tecnologia fornecida, essa pode acabar sendo uma feature simples, mas essencial.

É bem comum.

:seta: https://thimble.webmaker.org/en-US/
:seta: http://www.impressivewebs.com
:seta: http://letteringjs.com/