Comparar revisões

Usando animações CSS

Alterar Revisões

Revisão 292936:

Revisão 292936 por francisco.hansen em

Revisão 292947:

Revisão 292947 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 292936
Revisão 292947
n80    <h2 id="Defining_the_animation_sequence_using_keyframes">n80    <h2 id="Definindo_a_sequ.C3.AAncia_de_anima.C3.A7.C3.A3o_usan
 >do_keyframes">
n87      Since the timing of the animation is defined in the CSS&nbsn87      Como a sincronização da animação é definida por um estilo C
>p;style that configures the animation, keyframes use a {{ cssxref>SS que configura a animação, keyframes usam uma {{ cssxref("perce
>("percentage") }} to indicate the time during the animation seque>ntage") }}&nbsp; para indicar o tempo durante a sequência de anim
>nce at which they take place. 0% indicates the first moment of th>ação que eles fazem parte. 0% indica o primeiro momento da sequên
>e animation sequence, while 100% indicates the final state of the>cia de animação, enquanto 100% indica o estado final da animação.
> animation. These two times must be specified so that the browser> Esses dois tempos devem ser especificados para que o navegador e
> knows where the animation should start and finish; because they'>ntão saiba onde a animação deve começar e parar; por serem tão im
>re so important, these two times have special aliases: <code>from>portantes, esses dois tempos tem expressões equivalentes especiai
></code> and <code>to</code>.>s: from e to.
88    </p>
89    <p>88    </p>
90      You can optionally include additional keyframes that descri89    <p>
>be intermediate steps along the way from the starting point to th 
>e ending point of the animation. 
90      Você pode opcionalmente incluir keyframes adicionais que de
 >screvem passos intermediários ao longo do caminho do ponto inicia
 >l ao ponto final da animação.
n93      Examplesn93      Exemplos
t299            <a class="external" href="http://jsfiddle.net/RtvCB/9t299            <a class="external" href="http://jsfiddle.net/RtvCB/9
>/light/" rel="freelink">http://jsfiddle.net/RtvCB/9/light/an</a>>/light/" rel="freelink">http://jsfiddle.net/RtvCB/9/light/anb</a>

Voltar ao histórico