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

Есть идеи?