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,

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