Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como aplicar uma transition em duas propriedades ou mais, mas não em todas?

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

por Estudante
| 93.2k xp | 6 posts

Eu voltei pra página de produtos pra personalizá-la mais, e queria aplicar o efeito de transition em duas propriedades: a width e a margin.

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin-right: 20px;
    border: 2px solid #000000;
    border-radius: 20px;
    transition: 1s margin, width;
}

Já alterei de várias formas, e ou a transition se aplica em um deles ou em nenhum. Já tentei trocar para margin-rigth também, não muda nada.

1 resposta
solução!
por Guilherme Ávila
| 92.2k xp | 3 posts
Desenvolvedor Back End

Boa tarde Guilherme, tudo bem?

Teria que realizar a separação das propriedades por uma virgula e informar o tempo de duração da transição, tente:

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin-right: 20px;
    border: 2px solid #000000;
    border-radius: 20px;
    transition:  margin-right 1s, width 1s;
}