Невозможно остановить анимацию css после последнего ключевого кадра

У меня есть простая анимация css, которую я бы хотел сыграть, а затем остановился на последнем кадре, полностью отображая изображение. Но в настоящий момент в данный момент он воспроизводится, кажется, возвращается назад к кадру, поэтому исчезает лицо santas.

Как я могу заставить его играть через один раз, а затем останавливаться на последнем ключевом фрейме или отображать изображение без его исчезновения снова?

http://jsfiddle.net/uy25Y/

    <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">

     .santaface{
          opacity:0;
          position: absolute;
          left:40%; top:20%; width:20%;
            -webkit-animation-name: santaappear;
            -webkit-animation-duration: 13s;
            }


        .santaface{-webkit-animation-delay:2s;animation-delay:2s;}

        @-webkit-keyframes santaappear {
            0% { opacity:0;}
               96% {opacity:1;}
        }

Ответы

Ответ 1

Вам нужно animation-fill-mode: forwards, чтобы это не происходило.

Кроме того, вам нужно выполнить непрозрачность 1, поэтому последний кадр должен иметь непрозрачность 1.

Пример jsFiddle - он работает как ожидается.

Вы также можете сократить ключевой кадр, удалив 0%, поскольку это уже указано в начальном состоянии.

@keyframes santaappear {
    96% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

Вы также можете объединить 96% и 100%.

@keyframes santaappear {
    96%, 100% {
        opacity:1;
    }
}

Поскольку вы используете несколько свойств анимации, используйте сокращение анимации:

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>`

Что будет:

animation: santaappear 13s 2s forwards;
-moz-animation: santaappear 13s 2s forwards;
-webkit-animation: santaappear 13s 2s forwards;

В демонстрации я добавил префиксы поставщиков для -moz/-webkit. В дополнение к этим вы должны написать один без префикса. То же самое касается ключевых кадров.