Page 62 - Locaweb - Edição 28
Basic HTML Version
locaweb
entrar no Ceaser por meio do endereço eletrônico
que é um aplicativo
online, pode ser notado que ele trabalha essencialmente
em cima de um gráfico de atenuação. Esse gráfico (na
página anterior), no geral, trabalha em relação ao tempo
de animação e a realização da animação. Ele é conhecido
como Cubic Bezier (será visto com detalhes a seguir). Em
associação ao gráfico, há as ações Left,Width, Height e
Opacity. Elas têm as seguintes funcionalidades:
Left
Transportar o elemento da esquerda para direita
com um clique. Retorna o elemento para a
posição inicial no segundo clique.
Width
Aumenta a largura do elemento com um clique.
Retorna à largura inicial quando é aplicado o
segundo clique.
Height
Aumenta a altura do elemento com um clique.
Retorna à altura inicial no segundo clique.
Opacity
Torna transparente o elemento no primeiro
clique. No segundo clique, torna-o visível.
O que pode ser notado também é que existem
26 templates de gráficos que, no fim, são os representados
no pé da página.
Nesse ponto, é importante citar a seleção de duração
da animação que, por padrão, é gerada com o valor 500.
Todos esses templates provenientes de equações do
Robert Penner realizam a ação de trocar o código criado.
webkit-transition:
all 500ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
moz-transition:
all 500ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
o-transition:
all 500ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
transition:
all 500ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
webkit-transition-timing-function:
cubic-bezier(0.550, 0.055, 0.675, 0.190);
moz-transition-timing-function:
cubic-bezier(0.550, 0.055, 0.675, 0.190);
o-transition-timing-function:
cubic-bezier(0.550, 0.055, 0.675, 0.190);
transition-timing-function:
cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
::
lw
_
programação
Trata-se de um gerador de código
útil, com saída em CSS 3,
que personaliza a criação de
transições com uma fantástica
precisão em diversos sentidos
CSS 3: a nova versão das folhas de estilo é um projeto
suportado pelo W3C, consórcio que lida com padrões web
folhas de estilo
::
ceaser
linear
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeInCubic
easeInQuart
easeInQuint
easeInSine
easeInExpo
easeInCirc
easeOutQuad easeOutCubic
easeOutQuart
easeOutQuint
easeOutSine
easeOutExpo
easeOutCirc
easeInOutQuad easeInOutCubic easeInOutQuart
easeInOutQuint
easeInOutSine
easeInOutExpo easeInOutCirc
templates de gráficos
62
