Documento sem título

Documento sem título  Documento sem título


O CSS3 vem pra ajudar a todos. Pro desenvolvedor a vida fica mais fácil pois é possível chegar a efeitos, que antes precisavam de uma volta gigantesca, de uma forma bem mais simples; e o usuário que pode ganhar uma experiência melhor e mais rápida.

Transições

Um dos recursos que fazem do CSS3 um negócio tão bacana é a propriedade transition. Ao pé da letra e de um jeito bem direto, essa propriedade define como será a transição entre dois estilos.

Uma transição ocorre quando um elemento muda de um estado para outro e o navegador preenche essa mudança de estado com uma sequência de quadros intermediários. Possui um começo e um estado final.

É comum vermos transições sendo usadas para criação de efeitos com hover, ou quando algo é adicionado e/ou removido na página. O efeito do hover pode ser uma mudança sutil na cor da font e a informação na página pode surgir na tela.

Como as transições são limitadas a esses dois estágios, estas podem pecar na suavidade das animações e ao mesmo tempo se tornarem mais fáceis de serem implementadas.

Podemos definir, por exemplo, como vai ser a transição de um elemento:

  • na troca de uma classe;
  • nos estados :hover ou :focus.


    • O que a propriedade transition faz é analisar a diferença de valores da(s) propriedade(s) do elemento entre os dois estados/estilos e faz com que a transição aconteça de forma mais suave (pode ser customizada) e não de forma brusca como estamos acostumados.

    Passe o mouse
    Padrão
    Transição


    São 4 propriedades que podemos definir:

    transition-property => a propriedade a qual podemos aplicar a transição (se quiser aplicar em todas, você pode passar o valor all);

    seletor {
       transition-property: background-color; /* transição na cor de fundo */
    }
    seletor {
       transition-property: border, color; /* transição na borda e cor do texto */
    }
    seletor {
       transition-property: all; /* transição em todas as propriedades elegíveis para transição */
    }
    seletor {
       transition-property: margin-left, font-size, color; /* transição na margem esquerda, tamanho de fonte e cor do texto */
    }




    transition-duration => quanto tempo vai demorar a transição;

    seletor {transition-duration: 2s; }
    seletor {transition-duration: 3s; }
    seletor {transition-duration: 6s; }



    O exemplo a seguir mostra uma div 100px * 100px vermelho. A div também especificou um efeito de transição para a propriedade de largura, com uma duração de 2 segundos:

    div {
       width:10%;
       height: 100px;
       transition: width 2s;
    }
    div:hover {
       width:100%;
    }

    O efeito de transição vai começar quando a propriedade CSS especificada (largura) altera o valor.

    Passe o mouse



    Alterar Vários valores de propriedade

    O exemplo a seguir adiciona um efeito de transição para a largura e a propriedade de altura, com uma duração de 2 segundos para a largura e 4 segundos para a altura:

    div {
       transition: width 2s, height 4s;
    }

    Passe o mouse



    transition-delay => tempo que a transição vai demorar pra se iniciar (pode ser omitido e seu valor padrão é 0);

    seletor {transition-delay: 4s; }
    seletor {transition-delay: 2s; }
    seletor {transition-delay: 6s; }

    Passe o mouse
    Delay 1 seg.
    Delay 2 seg.
    Delay 3 seg.
    Delay 4 seg.



    transition-timing-function => como a transição vai progredir no tempo. Aceita os valores:

  • linear - especifica um efeito de transição com a mesma velocidade do início ao fim
  • ease - especifica um efeito de transição com um início lento, em seguida, rapidamente, em seguida, terminar lentamente (este é o padrão)
  • ease-in - especifica um efeito de transição com um início lento
  • ease-out - especifica um efeito de transição com um final lento
  • ease-in-out - especifica um efeito de transição com um início lento e no final
    • seletor {transition-timing-function: linear; }
    seletor {transition-timing-function: ease; }
    seletor {transition-timing-function: ease-in; }
    seletor {transition-timing-function: ease-out; }
    seletor {transition-timing-function: ease-in-out; }

    Passe o mouse
    linear
    ease
    ease-in
    ease-out
    ease-in-out



    Não há necessidade de escrever uma por uma, podemos optar pelo shortcode transition, a forma abreviada para as propriedades de transição mostradas anteriormente. Observe os exemplos a seguir

    seletor {transition: color 2s ease 3s; } /* transição de cor em 2s, animação ease, tempo de retardo de 3s */
    seletor {transition: color 2s linear, border 2s linear; } /* transição de cor e borda em 2s, animação linear */


    Dessa maneira, as variações abaixo tem o mesmo efeito:

    .classe {
         transition-property: all;
         transition-duration: 1s;
         transition-delay: 0s;
         transition-timing-function: ease;
    }

    .classe { transition: all 1s; }



    Documento sem título

    Animação CSS. Site by Elton Rodrigo