меню CSS3 и JQuery с эффектом размытия

Question

У меня есть проблема с моим меню на сайте: http://goo.gl/xc1E5F

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

Может ли кто-нибудь мне помочь? СПАСИБО!

Answer 1

css3animation должно быть ваше решение:

@keyframes myfirst{ 
    0% { 
     background: transparent; 
     color: #000; 
     text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.6); 
    } 
    50% { 
     background: rgba(255, 255, 255, 0.2); 
     color: transparent; 
     text-shadow: 0 0 5px #000000; 
    } 
    100% { 
     background: transparent; 
     color: #000; 
     text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.6); 
    } 
} 

Я создал fiddle, чтобы продемонстрировать это.