Comparar revisões

Usando animações CSS

Revisão 292955:

Revisão 292955 por francisco.hansen em

Revisão 292971:

Revisão 292971 por francisco.hansen em

Título:
Usando animações CSS
Usando animações CSS
Slug:
CSS/Using_CSS_animations
CSS/Using_CSS_animations
Conteúdo:

Revisão 292955
Revisão 292971
n96      <strong>Nota:&nbsp;&nbsp;</strong> Os exemplos auqi nao usan96      <strong>Nota:&nbsp;&nbsp;</strong> Os exemplos aqui não usa
>m nenhum prefixo nas propriedades de animação CSS. Navegadores ma>m nenhum prefixo nas propriedades de animação CSS. Navegadores ma
>is antigos podem precisar de prefixos; os exemplos ao vivo que vo>is antigos podem precisar de prefixos; os exemplos ao vivo que vo
>cê pode clicar pra ver em seu navegadors também incluem as versõe>cê pode clicar pra ver em seu navegadors também incluem as versõe
>s prefixadas -webkit.>s prefixadas -webkit.
n99      Making text slide across the browser windown99      Fazendo o texto deslisar através da janela do navegador
n102      This simple example styles the {{ HTMLElement("h1") }} elemn102      Esse exemplo simples estiliza o elemento {{ HTMLElement("h1
>ent so that the text slides in from off the right edge of the bro>") }} onde o elemento então deslisa para dentro vindo de fora da 
>wser window.>lateral direita da janela do navegador.
t123      The style for the {{ HTMLElement("h1") }}&nbsp;element heret123      O estilo para o elemento {{ HTMLElement("h1") }} aqui espec
> specifies that the animation should take 3 seconds to execute fr>ifia que a animação deveria levar 3 segundos para executar do iní
>om start to finish, using the {{ cssxref("animation-duration") }}>cio ao fim, usando a propriedade {{ cssxref("animation-duration")
> property, and that the name of the {{ cssxref("@keyframes") }} a> }}, e que o nome da regra com parênteses (at-rule){{ cssxref("@k
>t-rule defining the keyframes for the animation sequence is named>eyframes") }} definindo os keyframes para a sequência de animação
> "slidein".> é nomeado por "slidein".
124    </p>
125    <p>124    </p>
126      If we wanted any custom styling on the {{ HTMLElement("h1")125    <p>
> }} element to appear in browsers that don't support CSS&nbsp;ani 
>mations, we would include it here as well; however, in this case  
>we don't want any custom styling other than the animation effect. 
126      Se quisessemos quaisquer estilização customisada no element
 >o {{ HTMLElement("h1") }} para aparecer em navegadores que não su
 >portam animações CSS, incluiríamos aqui também; no entanto, nesse
 > caso não queremos nenhuma estilização customisada a não ser o ef
 >eito da animação.

Voltar ao histórico