CSS анимация для «техники исчезновения жёлтого»

Не думаю, что я первый, кому пришла в голову эта идея, но всё же задокументирую её.

Если вы не знакомы с этой техникой, прочтите статью «Web Interface Design Tip: The Yellow Fade Technique».

Этот дизайнерский эффект, ставший не так давно достаточно популярным, был использован 37 signals в ситуации, когда новый контент добавлялся на страницу и к нему пытались привлечь внимание пользователей.

Это всё то же самое, но с использованием CSS3 анимации.


<style>
:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
</style>

Живой пример «Wine: запуск Windows программ»

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>