Применение CSS-анимации к тексту - как это сделать правильно?

Question

Как правильно применить анимацию к тексту A и тексту B , чтобы они постепенно превратились из размытого в не размытое?

Сама анимация проста и готова:

@keyframes unblur {
from { filter: blur(6px); }
to { filter: blur(0); }
}

Вопрос , где , куда поместить следующий код, чтобы анимация применялась как к тексту A, так и к тексту B:

animation-name: unblur;
animation-timing-function: linear;
animation-duration: 1.2s;

JSFiddle (текст размыт, но приведенный выше код unblur еще не указан в скрипте).

ОБНОВЛЕНИЕ: РЕШЕНО. Спасибо!

Answer 1

Поместите эту строку в свой CSS и удалите фильтр: размытие (6 пикселей);из .blur_filter class

.blur_filter {
 animation: unblur 3s;
}

Вот пример Fiddle Link

Answer 2

Поскольку вы уже применили класс blur_filter к элементам TEXT A и TEXT B, вы можете просто написать эти свойства анимации внутри класса.

Попробуйте это:

.blur_filter {
 animation-name: unblur;
 animation-timing-function: linear;
 animation-duration: 1.2s;
}
@keyframes unblur {
 from { filter: blur(6px); }
 to { filter: blur(0); }
}