Flashcards
CSS transitions and transforms
Cards in this deck (24)
- 1Quais propriedades temos que definir para utilizar o recurso "trasition"?- Listar as propriedades que vamos fazer a transição .
-Definir o quão longo essa transição sera.
-Configurar um delay opcional ou mudança de velocidade. - 2Transições podem alterar a aparência quando quais estados de mudança acontecem?Quando posicionamos o mouse em cima( hover) , quando clickamos em algo que seja possível dar foco (focus), quando ativamos algo, como CLICKAR continuamente ( active) ou marcamos ( target).
- 3Quando queremos fazer a transição de todas as propriedades ao mesmo tempo, qual comando podemos utilizar ?devemos utilizar -
transition-duration: 0.4s;
exemplo :
.button {
color: #fff;
background: #4a89ca;
transition-duration: 0.4s;
/* Can use ms(mili secounds) like 0.4s = 400ms ) */
}
.button:hover {
background: #d36a62;
}
.button:active {
background: #a33830;
} - 4Porque devemos optar por utilizar "transition-property"?Por padrão as transitions são definidas com transtion-property: all.
sendo definida para todos os elementos, o navegador terá de procurar todas as propriedades que serão alteradas, gerando um trabalho extra para o computador e até comportamentos estranhos.
o ideal é definir com "transition-property: property" exatamente as propriedades que queremos alterar, dessa forma deixamos o processo mais rápido e com menos possibilidades de erros. - 5"transitons" só podem ser utlizado com propriedades...?Animaveis - animatable properties.
https://www.w3.org/TR/css3-transitions/#animatable-properties
Aqui a lista de propriedades animais e svg propriedades animadas. - 6Como podemos identificar se uma propriedade pode ou não ter uma animação?A maneira mais facil de se identificar é pensar se existe um "meio caminho" entre a variação dessa propriedade.
- 7Com qual comando podemos "eliminar" um elemento, ou torna-lo mais opaco?opacity: 0 ; -> O elemento some
opacity: 1; -> O elemento fica 100% na pagina
a propriedade varia de 0 a 1. - 8Como podemos fazer a transição de multiplas propriedades e com tempos diferentes?transition-property: background, border-radius, color;
transition-duration: .4s, .8s, .4s;
caso não colocasse o terceiro parametro em transition-duration, por padrão ele pegaria o primeiro.
A transition property e duration seguem a mesma ordem para definir tempos diferentes. - 9Qual comando utilizamos para fazer com que a "transition" demore um pouco antes de ocorrer? (ocorra um pouco depois que você executou o gatilho, como ficar em cima de algo )Utilizamos o comando :
transition-delay: .2s;
dessa forma após nos clickarmos ou ficarmos em cima do element, ele vai demorar .2s até executar as transições. - 10Quais comando podemos utilizar para dar um efeito mais natural ao movimento de uma transition?http://codepen.io/Guilh/full/vLpOGp
Como podemos ver no link, podemos aplicar esses valores a propriedade:
"transition-timing-function: "
ease
linear
ease-in
ease-out
ease-in-out
ease-in-out - 11Como funciona a shothand de transition?transition-property: opacity, background, box-shadow;
transition-duration: .5s;
transition-delay: .2s, .3s, 0s;
é escrito como
transtion: property, duration, timing, delay.
exemplo acima completo:
transition: opacity .3s ease-out .2s, background .4s ease-out .3s, box-shadow .5s ease-out 0s;
( para três propriedades ) - 12Como podemos fazer um elemento rodar em seu eixo? qual comando utilizamos?Utilizamos o
transform: rotate(45deg);
rotate aceita como parâmetro varias unidades, porém a mais utilizada é deg que é de degrees.
aceita valores de 0 á 360 para fazer uma rotação no sentido horário
e também de 0 á -360 para rotações no sentido anti-horário.
podemos utilizar também a unidade turn
que é numero de voltas : 1turn;
É Interessante lembrar que ao rodar o elemento, ele continua ocupando o mesmo espaço para o navegador que foi disponibilizados segundo o HTML, podendo gerar alguns problemas na forma como o conteúdo é colocado. - 13Como aplicamos distorções (skew) ?transform: skewX() or skewY()
skewX() - aplica distorções na horizontal (X)
skewY() - aplica distorções na vertical (Y)
lembrar que essas distorções afetam todos os elementos filhos.
Lembrar do site que criou um efeito bacana, colocando uma div com SkewX(15degre)
e outra div dentro com SkewX(-15degre)
deixando o conteudo de dentro da dentro corretamente alinhado, enquanto os fundos com um efeito de 15 graus. - 14Como alteramos a escala de um elemento com CSS?transform: scale(x,y)
o valor padrão é 1
2 é o dobro
se colocar somente um valor a escala vale para width e height, se colocarmos dois valores eles valem diferentes um do outro. - 15Qual atenção temos que ter ao aumentar a escala de um elemento?Devemos observar o tamanho original desse elemento, se for uma .jpg, .gif....
para não termos problemas com a resolução. - 16Ao utilizar a propriedade "transform" qual ponto é aplicado o efeito por padrão?por padrão o efeito é aplicado no centro do elemento selecionado .
transform-origin: 50% 50%;
podendo ser alterado com varios tipos de unidades.
transform-origin: 100% 100%
que é igual a
transform-origin: bottom right;
... - 17Como podemos mover um objeto de um lugar para outro no css?utilizando a propriedade
transform: translation()
podendo ser aplicado em
transform: translationX() - Horizontal
transform: translationY() - VERTICAL
OU A SHOTHAND ACIMA.
o valor que ela recebe é muito similar com os utilizados nos off-sets(top: 150px bottom 150px;) em elementos absolutos ou relativos.
aceitam qualquer valor relativos ou absolutos, (50%, em, px ) - 18O que devemos manter em mente quando falamos da propriedade "transform"?devemos manter em mente que temos que manter somente uma declaração transform para o elemento, de outra forma a ultima declaração ira sobre escrever a primeira.
transform: rotate(-5deg) scale(1.1) translateY(-20px);
por isso temos que declarar todas as transformações que queremos na mesma declaração para o elemento. - 19Qual o primeiro passo para criarmos um efeito 3D?Devemos primeiramente adicionar a propriedade "perspective: value" no elemento pai block-level, como uma div, para que permita que os elementos filhos possuam a capacidade de possuir efeitos 3D.
exemplo
div {
perspective: 700px;
}
esse valor é como a distância que a imagem aparenta estar do usuario. - 20Qual comando usamos para possibilitar que dois objetos ( imagems, ou divs...etc) "vivam no mesmo espaço 3D"?Devemos atribuir a div que contém os elementos que queremos que estejam no MESMO ESPAÇO 3D a propriedade:
transform-style: preserve-3d;
https://webkit.org/blog-files/3d-transforms/transform-style.html
box azul - propriedade perspective
box roxa - prorpeidade transform-stlye
-elementos entram no espaço 3D - 21Qual o comando para ajustar a visibilidade dos elementos que estão no mesmo ESPAÇO 3D?backface-visibility: hidden;
dessa forma ambos não apareceram quando o outro aparecer. - 22Qual comando podemos utilizar para criar multiplas rotações com apenas um value na propriedade "transform"?transform: rotate3d (0, 0, 0, 180deg)
dessa forma controlamos todos os eixos de rotação (x,y,z, ANGULO)
variando de 0 ou 1 os eixos, que significa, sem rotação e com rotação. - 23Como podemos alterar a perspectiva de um elemento css?perspective-origin: 50% 100%;
na div com maior level no HTML.
suportando também
top bottom
PADRÃO é NO MEIO 50% - 50% - 24Qual comando podemos utilizar para criar multiplas rotações com apenas um value na propriedade "translate"?transform: translate3d(x value, y value, z value);
Information
- Description
- asa Technical Skills (CSS) Flashcards on CSS transitions and transforms, created by Victor Bini on 31/05/2016.
- Created by
- Victor Bini
- Views
- 4
- Rating