Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Transition e transform

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Essa linha diz que tudo isto ocorre em 2 segundos ? transition: width 2s, height 2s, background-color 2s, opacity 2s, transform 2s;

Mas esta chamada de transformar, e transição, as coisas ocorrem quando o evento de mouse over (o hover) é disparado ?


.apply_transition {
    background-color: black;
    width: 255px;
    height: 255px;
    padding: 20px;
    margin: auto;
    margin-top: 80px;
    opacity: 0.3;
    transition: width 2s, height 2s, background-color 2s, opacity 2s, transform 2s;
}

.apply_transition:hover {
    transform: scale(1.5);
    opacity:1.0;
    /*
    transform: translate(250px);
    transform: rotate(50deg);
    transform: rotate(360deg);
    */
}
4 respostas
por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Fala Eduardo, blz?

Isso mesmo, o gatilho aí é o hover. Testa depois colocar com :active também.

Se você colocar o transition só no hover, o que acontece quado você passa e tira o mouse, qual a diferença entre deixar na regra normal, ou com o :hover?

Com esse código comentado, as únicas coisas que são alteradas aí são o 'scale' e a 'opactiy'. Tanto que se você deixar na primeira regra da seguinte forma, vai ter o mesmo efeito.

.apply_transition {
    /* resto do regra css*/
    transition: opacity 2s, transform 2s;
}

Espero ter ajudado,

abcs!!

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Se você colocar o transition só no hover, o que acontece quado você passa e tira o mouse, qual a diferença entre deixar na regra normal, ou com o :hover?

Resposta: Se colocarmos essa linha dentro do :hover

transition: width 2s, height 2s, background-color 2s, opacity 2s, transform 2s;

O evento de transição so ocorre após (after) o evento :hover que foi disparado, que irá fazer toda transição em 2s e juntamente nosso transform em 2s tb.

transform: scale(1.5); opacity:1.0;

Aplicando a pseudo-classe :active percebi que a resposta é ao pressionar o botao esquerdo do mouse https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Apliquei

.apply_transition { transition: opacity 2s, transform 2s; }

Entao antes do hover executar o que tem dentro dele, é executado a transition (essa "regra")?

transition: opacity 2s, transform 2s;

Que logo ele faz essa opacity, e transform em 2 segundos...

Faço analogia ao :before e :after, seria o mesmo conceito ?

"Ah :hover é disparado, mas :before a ele, tenho essa regra de transição, ai :after (depois de hover ser chamado) se aplica essa regra... ou seja ao que vinha depois de :hover..."

é como dizer que a transição desses dois parametros vai ocorrer em dois segundos quando hover for chamado.

solução!
por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Eduardo,

Perfeito!! O active é quando o usuário está de fato segurando o click esquerdo do mouse.

Se você colocar a transição só no :hover, ele faz tudo bonitinho enquanto o mouse está em cima do elemento.

Uma vez que você tira, ele não faz a animação reversa.

Por isso que o bacana é por o transition sempre na regra normal, sem :hover ou :active. Assim caso algum valor como width ou height mude no :hover ou :active, a transição já vai estar setada, pra ir e voltar.

O tempo que colocamos na transition é o tempo que vai durar a transição em si. Você pode até usar a propriedade transition-delay para atrasar o início dessa transição.

Abcs!

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Show! abçs :D