CSS анимация для «техники жёлтого затухания»
Не думаю, что я первый, кому пришла в голову эта идея, но всё же задокументирую её.
Если вы не знакомы с этой техникой, прочтите статью «Web Interface Design Tip: The Yellow Fade Technique».
Этот дизайнерский эффект, ставший не так давно достаточно популярным, был использован 37 signals в ситуации, когда новый контент добавлялся на страницу и к нему пытались привлечь внимание пользователей.
Это всё то же самое, но с использованием CSS3 анимации.
:target { -webkit-animation: target-fade 3s 1; -moz-animation: target-fade 3s 1; 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); } } @keyframes target-fade { 0% { background-color: rgba(0,0,0,.1); } 100% { background-color: rgba(0,0,0,0); } }
Ссылки
- Yellow Fade Technique with CSS Animations
- Web Interface Design Tip: The Yellow Fade Technique
- Про :target