css3 анимация жестко мигает (без затухания между кадрами)

пытаюсь прошить три элемента подряд css3 анимацией. у меня он работает, но для каждого кадра есть затухание, и я хотел бы его удалить. в идеале каждый элемент остается видимым в течение 1 с, а затем немедленно скрывается.

Я пытался установить анимацию с кадрами 0% и 99% для opacity:1 и 100% для opacity: 0, но все равно не повезло.

Я надеюсь, что есть способ удалить выцветание!

скрипт js webkit

CSS:

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
}
    .frame:nth-of-type(2) {
        -webkit-animation-delay: 1s;
    }
    .frame:nth-of-type(3) {
        -webkit-animation-delay: 2s;
    }

    @-webkit-keyframes flash {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

animation css opacity blink
person technopeasant    schedule 18.03.2013    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Используйте правильный animation-timing-function:

http://jsfiddle.net/rfGDD/1/ (только WebKit)

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal; /* not "linear" */
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(3, end);
}

документ MDN на fill-mode

документ MDN на direction

документ MDN по steps() функции синхронизации

Изменить:

Упс, только что понял логическую ошибку.

Исправлено: http://jsfiddle.net/rfGDD/3/ (только WebKit)

В дополнение к вышеуказанному изменению измените анимацию flash на следующую:

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Проблема в том, что анимация воспроизводится 3 секунды, но каждый элемент должен оставаться в состоянии opacity:0 после секунды #1, поэтому мне нужно разделить анимацию на 2 этапа (с соотношением длины хронометража 1:2), чтобы элементы могли выглядеть как будто они остаются в финальной стадии в течение 2 секунд.

person Passerby    schedule 18.03.2013
comment
Спасибо за ответ! понимаю, что вы говорите о режиме заполнения и направлении, но видите проблему с шагами. Судя по вашей скрипке, анимация определенно состоит из трех этапов, но она становится все темнее и темнее. вместо этого он должен постоянно мигать красным, зеленым и синим цветом без выцветания или потери яркости. если я прокомментирую функцию синхронизации, она лучше просто мигает каждым цветом, но имеет исчезновение непрозрачности от 100% до 0, которого я стараюсь избегать. есть идеи? - person technopeasant; 18.03.2013
comment
@technopeasant Ой, моя ошибка. Я обновил свой ответ, пожалуйста, проверьте! - person Passerby; 18.03.2013

arrow_upward
16
arrow_downward

Просто определите свою анимацию так, чтобы она сохраняла одно состояние как можно дольше, а затем как можно быстрее переключалась на другое. Как это:

@-webkit-keyframes flash {
      0% { opacity: 1; }
     49% { opacity: 1; }
     50% { opacity: 0; }
    100% { opacity: 0; }
}
person mbirth    schedule 27.01.2015
comment
Это определенно должен быть ответ. - person skolind; 10.08.2017

arrow_upward
3
arrow_downward

Вы можете сохранять непрозрачность в течение самого длительного периода времени и очень быстро изменять ее.

Попробуй это:

.blinkMe {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0%,50% {
    opacity: 0;
  }
  51%,100% {
    opacity: 1;
  }
}
person Kande Bonfim    schedule 18.06.2016