css animações - parte 1
DESCRIPTION
Aula de animação em CSSTRANSCRIPT
-
TransformaesNo CSS3 foram introduzidas algumas funes para realizar as transformaes de translado,
escalonamento, distoro e rotao nos elementos de uma pgina HTML. Essas funes so
utilizadas em conjunto com a propriedade transform do CSS3.
translate()O resultado da aplicao da
funo translate(m, n)
semelhante ao resultado
obtido ao mover um
elemento atravs do atributo
position com o valor
relative. Ao utilizar a funo
translate(m, n) um elemento
transladado a m unidades
de medida da esquerda e n
unidades de medida do topo.
-
scale()A funo scale(m, n) escalonar as dimenses de um
elemento. O escalonamento ser aplicado sobre a largura
a uma taxa definida por m e sobre a altura a uma taxa
definida por n. Caso a funo seja chamada com apenas
um parmetro, a mesma taxa ser aplicada na altura e
largura do elemento.
-
rotate()A funo rotate(m) rotacionar um elemento em torno do
seu ponto de origem. O valor de m deve ser dado em
graus, voltas ou grado.
-
skew()A funo skew(m, n) distorcer um elemento em relao
aos eixos x e y. m e n definem as distores aplicadas
nos eixos x e y respectivamente. Os valores de m e n
devem ser dados em graus, voltas ou grado.
-
Atividade
-
TransiesComo vimos anteriormente, as regras CSS podem ser aplicadas aos elementos HTML de
acordo com o estado atual do mesmo. Por exemplo, considere as duas regras CSS a seguir.
div {
width : 50 px;
height : 50 px;
}
div : hover {
width : 100 px;
height : 100 px;
}
De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por
cima de um div, a largura e a altura desse elemento HTML aumentar instantaneamente de
50px para 100px.
-
Atividade
-
Quando a mudana visual de um elemento HTML muito significativa, o resultado pode no ser agradvel
aos usurio. A linguagem CSS possui propriedades para melhorar essas transies.
transition-durationA durao das transies pode ser controlada coma propriedade transition-duration. Os navegadores
devem gerar, automaticamente, frames intermedirios entre visual inicial e o final. Esses frames devem ser
exibidos sequencialmente durante o tempo determinado com a propriedade transition-duration.
-
transition-delayPodemos estabelecer um atraso para o incio de uma transio com a propriedade transition-delay.
-
transition-timing-functionOs frames que foram uma transio podem ser exibidos com padres diferentes. Por exemplo,
uma transio pode iniciar devagar, no meio acelerar e terminar devagar. O padro desejado pode
ser determinado atravs da propriedade transition-timing-function.
-
transition-propertyPodemos escolher quais propriedades CSS devem ser
consideradas nas transies atravs da propriedade
transition-property.Valor Descrio
-
AnimaesA partir da sua terceira verso, a linguagem CSS adicionou algumas propriedades para criao de
animaes. Essas animaes so criadas atravs do conceito de keyframes. Nessa abordagem,
devemos definir os quadros principais e os navegadores completam a animao inserindo os quadros
intermerdirios. Os quadros principais so definidos com a propriedade keyframes. A forma mais
simples de utilizao dessa propriedade definir o primeiro e o ltimo quadro da animao.
-
Os quadros principais so definidos de acordo
como momento no qual eles sero exibidos.
Esse instante descrito como uma porcentagem
do tempo total da animao.
-
Depois de definir as animaes com a propriedade keyframes, devemos associ-la aos
elementos HTML atravs da propriedade animation-name e determinar o tempo de durao
com a propriedade animation-duration.
-
O arquivo CSS e as figuras esto no Moodle.