Seus pais vão viajar e você deve cuidar do seu mini irmãozinho de 3 anos.
Com um comportamento de anjinho (#sqn), o pequeno Joãozinho vai dar trabalho.
Você, como um ótimo irmã(ão) e programador(a) exímio, decide que é hora de criar um jogo Web para, além de entreter seu mini-irmão, ensiná-lo como falar o nome de alguns animais.
O arquivo jogo.js
controla o jogo. Ele tem um temporizador que
fica adicionando e removendo classes dos elementos dos animais
com-fome
~ quando o animal está com fome
satisfeito
~ quando o animal acabou de comer
com-raiva
~ quando um animal sossegado é perturbado
atacando
~ quando um animal com fome não é alimentado a tempo
com-fome
, animal piscando (opacidade variando)satisfeito
, uma borda verde no animal e o animal fica girando de alegriacom-raiva
, animal vai crescendo, ou fica pulsandoatacando
, animal dá um salto e cresce, com uma borda vermelhatransform
perspective
block
(ou inline-block
)<p>Yay, girei com força!</p>
p { transform: rotate(-3deg); }
Yay, girei com força!
transform
:
translate(x,y)
translateX(x)
translateY(y)
translateZ(z)
translate3d(x,y,z)
scale(x,y)
scaleX(x)
scaleY(y)
scaleZ(z)
scale3d(x,y,z)
1
indica tamanho 100%
2
indica dobro do original rotate(ang)
rotateZ(ang)
rotateX(ang)
rotateY(ang)
rotate3d(x,y,z,ang)
deg
: graus, exemplo: rotate(20deg)
turn
: voltas, exemplo: rotate(-2.5turn)
rad
: radianos, exemplo: rotate(1rad)
Para ter um efeito de profundidade das coisas, precisamos definir uma projeção perspectiva:
body {
perspective: 400px;
/* quanto menor, maior
o efeito */
}
animation
transform-origin
:
.porta {
transform-origin: left center;
}
.porta:hover {
transform: rotateY(-95deg);
}
translate
, rotate
e scale
.carta {
rotate: y 180deg;
scale: 0.9;
translate: 200px 100px;
}
transition
setTimeout
transition
transition
Heyyy, hover me
:::
p {
color: 'red';
transition: color 600ms linear;
/* propriedade duração interpolação */
}
p:hover {
color: 'black';
}
CSS
queremos animar, por quanto tempo
e qual a função de interpolaçãotransition-property: all
, ou qual propriedade CSS
deve sofrer transiçãotransition-duration: 0s
, ou a duração da transiçãotransition-timing-function: ease
, a função de interpolaçãotransition-delay: 0s
, tempo de atraso até que se comece a transiçãotransition: [ none | <single-transition-property> ] || <time>
|| <timing-function> || <time>;
transform
(⚡ fast)opacity
(⚡ fast)color
background-color
left
right
top
bottom
background-position
border-radius
margin
padding
width
height
<a href="#">Effects like a boss</a>
a {
display: inline-block;
transition:transform .2s cubic-bezier(.37,1.89,.59,.73);
}
a:hover {
transform: scale(1.4);
}
animation
@keyframes
animation
e @keyframes
possibilitam o uso de
animações de propriedades CSS de forma similar a transition
<img src="images/urso.jpg" id="urso">
#urso {
position: relative;
animation: flutuando .5s ease-in-out 0s infinite alternate;
}
@keyframes flutuando {
from { top: 0; }
to { top: -30px; }
}
@keyframes
) eanimation
)@keyframes
definem o valor das propriedades que variam ao longo da
animaçãoanimation
configura o tempo da animação, a ordem de execução e o nome da
sequência de quadros a ser usadaanimation-name: none
, nome dado ao @keyframes
a ser usadoanimation-duration: 0s
, duraçãoanimation-timing-function: ease
, função de interpolaçãoanimation-delay: 0s
, tempo de atrasoanimation-iteration-count: 1
, quantas vezes rodar (pode ser infinite
)animation-direction: normal
, em que sentido executar
normal
, reverse
, alternate
, alternate-reverse
animation-fill-mode: none
, o que fazer com o resultado da animação após
terminaranimation-play-state: running
, estado da animação@keyframes piscando {
from { opacity: 1.0; } /* usa apenas */
to { opacity: 0.7; } /* 'from' e 'to' */
}
@keyframes terra-ao-longo-do-dia {
/* define quantos pontos forem necessários */
0% { background: #6c5228; } 33% { background: #48a037; }
66% { background: #48a037; } 100% { background: #6c5228; }
}
.estrela-mario-1:hover { /* apenas em :hover */
animation: girando 1s ease-in-out 0s infinite alternate;
}
@keyframes girando {
from {
transform: rotate(15deg);
}
to {
transform: rotate(-15deg);
}
}
.estrela-mario-2:hover {
animation: sumindo 600ms ease-in 3s 1 forwards,
girando-de-costas 3600ms ease-in 1 forwards;
}
@keyframes sumindo {
from { opacity: 1; bottom: 0; width: 100px; right: 0; }
to { opacity: 0; bottom: 200px; width: 20px; right: 40px; }
}
@keyframes girando-de-costas {
from { transform: rotateY(0); }
to { transform: rotateY(3600deg); }
}
transition
~ é uma interpolação entre dois valores de uma propriedade
animation
~ é uma interpolação entre dois ou mais valores, opcionalmente
acontecendo mais de uma vez e em ordem alternada
transition
, quando possívelEm 01/04/2015, a Google lançou um espelho para seu buscador, o com.google. Ele se parecia com isto: com.google
Usando transformações e animações, fica facinho fazer um desses!! Paradinha do Google Rabo do cachorro