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

Question

У меня есть случай, когда мне нужно, чтобы элемент появлялся на секунду, а затем исчезал, и я не должен использовать для него 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» не поддерживает анимацию. Если кто-нибудь может придумать решение, как показать и скрыть элемент с анимацией (без перехода!), Я буду чрезвычайно признателен.

Есть идеи?

Answer 1

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

Пример CSS:

animation:1s move infinite step-end;

Приведенный выше пример вызовет ключевые кадры move (которые я не писал, потому что это не имеет значения)и будет бесконечно зацикливаться на кадрах с аргументом «step», который был описан ранее, без переходной кривой.

DEMO

Answer 2

Я искал то же самое, что и ты. Вы можете установить замечательные параметры в анимации, называемые animation-timer-function , позволяющие вам точно и математически установить анимацию: со значениями кривой Безье или, если, как я, вы не такой хороший математик вызов параметра "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.

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

Answer 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%, не возвращаясь в исходное состояние.

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

Answer 4

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

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