Utrzymanie końcowego stanu na końcu animacji CSS3

301

Uruchomiam animację na niektórych elementach ustawionych opacity: 0;w CSS. Klasa animacji jest stosowana naClick i, używając klatek kluczowych, zmienia krycie z 0na 1(między innymi).

Niestety po zakończeniu animacji elementy wracają do opacity: 0(zarówno w przeglądarce Firefox, jak i Chrome). Moje naturalne myślenie byłoby takie, że animowane elementy utrzymują stan końcowy, zastępując ich oryginalne właściwości. Czy to nie prawda? A jeśli nie, jak mogę zmusić element do zrobienia tego?

Kod (wersje prefiksowe nie są dołączone):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
css css-animations Dan
źródło
1
Zamieszczę własne powtórne powiadomienie: stackoverflow.com/questions/9196694/css3-animation-scale Przynajmniej mój ma bardziej pouczający tytuł!
Dan
możliwy duplikat CSS3 Animate: Jak sprawić, aby obiekt nie powrócił do swojej początkowej pozycji po uruchomieniu animacji?
Michael Mullany,

Odpowiedzi:

528

Spróbuj dodać animation-fill-mode: forwards;. Na przykład tak:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
Christofer Vilander
źródło
1
Tak to jest to. Sprawdzę twoją odpowiedź, kiedy będę mógł. Jeśli któryś z szefów CSS chce skomentować logikę tego wymaganego, chciałbym wiedzieć!
Dan
8
O właściwości animacji trybu wypełnienia możesz przeczytać tutaj - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Nadzieja, która pomaga!
Christofer Vilander
6
@Dan forwardswartość animation-fill-modewłaściwości zapewnia, że ​​element zachowa ostatni stan klatki kluczowej animacji po zakończeniu animacji. na przykład jeśli animacja zmieni się widthz 0 na 100 pikseli, ta właściwość gwarantuje, że element pozostanie szeroki na 100 pikseli po zakończeniu animacji.
Farzad YZ
5
nie zapomnij podać 100% / topunktu, w @keyframeprzeciwnym razie nie zadziała.
Tomasz Mularczyk,
animacja-tryb wypełnienia: naprzód wykonał także lewę dla mnie, ale dopiero po dodaniu imperatywu „! ważny” do reguły
shayuna
26

Jeśli używasz więcej atrybutów animacji, skrót to:

animation: bubble 2s linear 0.5s 1 normal forwards;

To daje:

  • 2s Trwanie
  • linear funkcja pomiaru czasu
  • 0.5s opóźnienie
  • 1 liczba iteracji (może być nieskończona)
  • normal kierunek
  • forwards tryb wypełnienia (cofnij, jeśli chcesz mieć zgodność, aby użyć pozycji końcowej jako stanu końcowego)
agiopnl
źródło
14

JEŚLI NIE WYKORZYSTUJESZ KRÓTKIEJ WERSJI RĘCZNEJ: Upewnij się, że animation-fill-mode: forwardsjest PO deklaracji animacji, inaczej nie będzie działać ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Taylor A. Leach
źródło
1
Masz rację. Zaktualizowałem moją odpowiedź. Dzięki, umykało mi haha.
Taylor A. Leach
4

Użyj trybu wypełnienia animacji: do przodu;

animation-fill-mode: forwards;

Element zachowa wartości stylu ustawione przez ostatnią klatkę kluczową (zależy od kierunku animacji i liczby iteracji animacji).

Uwaga: Reguła @keyframes nie jest obsługiwana w programie Internet Explorer 9 i wcześniejszych wersjach.

Przykład roboczy

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
Rozwiń fragment kodu

Deepu Reghunath
źródło