Ефект на въведен текст с CSS3

Има доста решения за прилагане на ефекта на въведен текст с javascript. На jQuery, например, можете да изпишете такива гевреци с текст, че да се учудите. Но винаги се интересувам от възможността за изпълнение на определена задача с помощта на свойства на CSS3, разбира се, само когато е оправдано и не носи очевидни загуби в общата картина на крайния резултат. На един от проектите ми се наложи (с лека ръка и по прищявка на клиента) да направя кратко описание на сайта под формата на печатен текст, който се появява под логото при зареждане. По някакъв начин не исках наистина, заради един ред, да свържа допълнителен плъгин, за да работи. Не отне много време да намерите оптималното решение; с помощта на CSS анимация можете да създадете доста привлекателна илюзия за печатен текст. Разбира се, с използването на специални jQuery добавки, Typed.js например, има повече възможности по отношение на настройките и регулирането на различни параметри на ефекта. Но за прост печатен текст е напълно възможно да се справите само с CSS, достатъчни са само няколко реда код и вашият текст ще оживее.

Използване на CSS анимации

Преди да пристъпя към анализа и описанието на свойствата на CSS, искам да ви предупредя, че ефектът работи добре вмодерните браузъри, Firefox, Chrome, Opera и дори IE, започвайки от версия 10, се справят с CSS анимация. За версии на IE9 и по-стари е по-добре да използвате механизми на javascript.

CSS анимацията има чудесна animation-timing-function, свойство, което описва как се изчисляват междинните стойности на свойството по време на анимация. С помощта на една от функциите на това свойство, а именноsteps (), можем да определим броя на кадрите на анимацията,премахване на обичайната гладка анимация и създаване на анимационен блок, който пресъздава реалния ефект от писането. Използвайки стойностите на функцията steps(), можем да реализираме анимация чрез увеличаване на размера на елементите, започвайки от0 и до края на реда (параграф)

Нека приложим свойството анимация за кратък абзац, за това ще увием реда от текста, от който се нуждаем, с таг

с определен клас, например: , ще завърши със следната конструкция в html:

Прост пример за създаване на текст за печат с помощта на CSS3 анимация.

Сега, директно вcss нека дефинираме всички необходими свойства за този клас. Нека зададем ширината на абзаца, размера, цвета и стила на шрифта, от които се нуждаем, добавете свойството overflow:hidden; , като по този начин използвайки обвързването със стойността0 в @keyframes ще скрием текста, преди анимацията да бъде включена в работата. И накрая, ние дефинираме стойностите на анимацията, от които се нуждаем във функцията за времестъпки ()

CSS стойности например:

В работата използвах оригиналния фрагмент от колекцията Paulund.