4

Tenho uma div, que é animada, e não gostaria que no final da animação ela volta-se para o estado de quando ela começou, porque ela acaba voltando ao estado original ao final da animação.

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    animation-name:animacao;
    animation-duration:3s;
    animation-iteration-count:1;
    animation-delay:0.5s;
}
@keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}
<div id="div1"></div>

jsfiddle: http://jsfiddle.net/fauqk0e5/

5
  • 1
    O fiddle não faz nenhuma animação, para além de apresentar o quadrado.. Commented 8/01/2015 às 18:26
  • @CesarMiguel Seu browser não deve suportar essas propriedades sem prefixo. Tente jsfiddle.net/zb4rfgkk no Chrome.
    – bfavaretto
    Commented 8/01/2015 às 18:33
  • @bfavaretto exacto, faltava os prefixos Commented 8/01/2015 às 18:38
  • 1
    @Guilherme Beat me by 5s :)
    – bfavaretto
    Commented 8/01/2015 às 18:42
  • @bfavaretto Sério? Foi sorte cowboy, você ainda é o mais rápido do oeste kkkk
    – Syzoth
    Commented 8/01/2015 às 18:56

2 Respostas 2

6

Existe uma propriedade experimental chamada animation-fill-mode que define "como uma animação CSS deve aplicar os estilos ao alvo antes e depois de sua execução". O valor forwards determina que o elemento retenha os estilos do último keyframe da animação.

Aplicando isso, com o prefixo -webkit para todas as propriedades, seu CSS ficaria assim:

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    -webkit-animation-name:animacao;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-delay:0.5s;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}

http://jsfiddle.net/dp3ywmw9/

Mas atenção: o código com esse prefixo só funcionará em browsers que aceitam esse prefixo. É recomendável incluir todos os prefixos além de uma versão não prefixada (ou usar algum JS que faça isso para você).

2
  • Bom ter comentando que ele retêm o último keyframe da animação, pois se eu faço uma animação com varios keyframes, 10%,20%,.. ele não acumula e simplesmente para no final, ele apenas retêm o ultimo keyframe e pausa a animação nele.
    – Ale
    Commented 8/01/2015 às 21:13
  • Acho que talvez, o mais ideal seria rodar a animação com JS e no fim pausá-la no último estado Commented 28/11/2019 às 12:37
2

Podes adicionar a propriedade -webkit-animation-fill-mode: forwards; para não voltar a posição incial:

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    -webkit-animation-name:animacao;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-delay:0.5s;
    -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}
4
  • Postamos a mesma coisa quase ao mesmo tempo!
    – bfavaretto
    Commented 8/01/2015 às 18:42
  • Estava a fazer uns teste nos browsers a ver se ficava bem em todos, porém foste 15 segundos mais rápido, mas com uma resposta bem detalhada :) +1 Commented 8/01/2015 às 18:44
  • @bfavaretto Mas os prefixos do Cesar parecem estar errados, o certo não deveria ser assim -webkit-* ao invés de webkit-*?
    – Syzoth
    Commented 8/01/2015 às 19:00
  • É verdade, @GuilhermeNascimento
    – bfavaretto
    Commented 8/01/2015 às 19:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .