CSS Animations - изменить свойство без перехода?

У меня есть случай, когда мне нужен элемент, который появляется на секунду, а затем исчезает, и я не должен использовать javascript для него, поэтому я пытаюсь заставить его работать с CSS.

Вот пример:

@-webkit-keyframes slide-one-pager {
    0% { left: 0; }
    50% { left: 100px; }
    100% { left: 0; }
}

Итак, в этом примере свойство будет постепенно переходить от 0 до 100 и обратно в 0. Однако мне нужно избавиться от этого перехода, поэтому свойство остается равным 0 и достигает 100, как только он достигнет 50%. Это не работает, если я говорю влево: 0; на 49%, потому что все еще есть переход.

Еще один пример, немного отличный от моего первоначального вопроса, но если я найду решение для него, он будет также делать:

@-webkit-keyframes slide-one-pager {
    0% { display: none; }
    50% { display: block; }
        75% { display: block; }
    100% { display: none; }
}

Здесь я хочу показать элемент в течение определенного периода времени. Нет, использование непрозрачности не является опцией, потому что элемент все еще существует и по-прежнему доступен для клика, и мне нужен доступ к элементам ниже. К сожалению, свойство "display" не похоже на оживление. Если кто-нибудь может подумать о решении, как показать и спрятать элемент с анимацией (без перехода!), Я буду чрезвычайно благодарен.

Любые идеи?

Ответы

Ответ 1

Ну, так как никто не упомянул очевидное. Вы можете использовать step-start или step-end (графики) в своей конфигурации анимации, чтобы кривая будет действовать как "шаги" (не изогнутые), поэтому визуальный переход между кадрами не будет, поэтому анимация будет просто "прыгать" между кадрами.

Пример CSS:

animation:1s move infinite step-end;

В приведенном выше примере будут отображаться ключевые кадры move (которые я не писал, потому что они неактуальны), и будет бесконечно циклически перемещаться по кадрам в "шаговом" вопросе, который был описан ранее, без переходящей кривой.

DEMO

Ответ 2

Я искал то же, что и вы. Вы можете установить великолепные параметры в анимации под названием анимация-время-функция, что позволит вам установить совершенно и математически анимацию: с помощью значений кривой Безье или, если, как и я, вы не такой хороший математик, вызов параметра "step()". Например, ни одно сокращенное письмо:

.hiding {
      animation-name:slide-one-pager;
      animation-duration:2s;
      animation-timing-function:steps(1);
}

По умолчанию значение этого параметра равно 0, что означает отсутствие шагов. Вы можете узнать больше об этой интересной функции здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

И вот короткая нотация для вашей анимации:

.hiding {
      animation:slide-one-pager 2s steps(1);
}

Для меня он работает нормально, по крайней мере, на firefox 23.0.1.

Даже если я думаю, что вы решили проблему с одного года, возможно, могли бы помочь некоторым людям, как я, здесь:)

Ответ 3

Я сделал это, используя свойство -webkit-animation-fill-mode: forwards;, которое останавливает анимацию на 100%, не возвращая элемент в исходное состояние. Я составил скрипку с рабочим примером, вы можете проверить это здесь.

Хотя в скрипке вы можете найти лучший пример, я в основном сделал это (предполагая абсолютные позиционированные элементы):

.hiding {
    -webkit-animation: slide-one-pager 2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes slide-one-pager {
    0%   { left: 0; }
    49%  { left: 0; }
    50%  { left: -100px; }
    100% { left: -100px; }
}

Он просто перескакивает от 0 до -100 в середине перехода (49% → 50%, как вы предполагали): P) и остается там на 100%. Как сказано, при -webkit-animation-fill-mode: forwards; элемент останется таким же, как и 100%, не возвращаясь к исходному состоянию.

Я не знаю, будет ли это работать в вашем сценарии, но я считаю, что это будет простое решение, если оно не будет.

Ответ 4

Вы можете использовать это:

animation: typing 1s cubic-bezier(1,-1, 0, 2) infinite;