Главная » Языки программирования

Font animation in html

75 CSS Text Animations You Can Use

I have handpicked some of the best and coolest CSS text animations for you to try on your website.

Most of the examples here only use CSS or very minimum JS, so you can use these very easily on your website or project.

You may also like

  • CSS Glow Text Effects
  • 55 Animated jQuery Buttons
  • 15 Amazing CSS Animated Background for you to try
  • 57 Beautiful CSS Cards examples to improve your UI
  • 19 Cool CSS Loading Animation to inspire you
  • 17 Fancy CSS Search Boxes
  • 21 Modern CSS menu examples
  • 19 Stylish CSS forms
  • 23 Fantastic CSS Hover Effects
  • 19 CSS Border Animations you can implement
  • 15 Stylised CSS Tables
  • 13 Pure CSS Dropdown Menus
  • 15 Creative CSS Filter Examples
  • 35 Unique CSS Text Effects
  • 15 CSS Sliders you can use
  • 21 New Bootstrap Login Forms for you
  • 19 Bootstrap Profiles you can use for yourself
  • 13 Material Design Login Forms
  • 35 Cool CSS Select Boxes
  • 15 CSS Range Sliders you can use today
  • 35 Creative use of CSS clip-path examples
  • 29 Unique CSS Toggle Switches
  • 41 Beautiful CSS Animation Examples

Simple CSS text animation

Dev: Nooray Yemon

CSS3 Text Animation Effect

Dev: Nick Mkrtchyan

Text Animation: Montserrat

Dev: Claire Larsen

Pure CSS Text Animation

Dev: Robin Treur

Text Animation with background

Dev: Nooray Yemon

Shining Text Animation Effects

Dev: FrankieDoodie

Netflix style text animation with CSS

Dev: Nooray Yemon

SVG Text Animation Using Stroke Offset Method

Dev: Mack Ayache

Pure CSS Text Animation

Dev: Arlina Code

Happy New Year! — CSS Only

Dev: SnailCrusher

Text animation

Intro Text Animation

Dev: Joacim Nilsson

CSS text animation

Dev: Aniket Singh

3D CSS Text Animation

Dev: Tomas Piksrys

(cool) text effect

Dev: Hakkam Abdullah

Flickering Light Text Effect

Dev: Mandy Michael

Pure CSS text-animation

Dev: vainsan

Pure CSS Text Animation Loading

Dev: Bousahla Mounir

Dev: Banlawi

Pure CSS Text Reveal

Dev: Mattia Astorino

SVG Text Animation in CSS

Dev: Maciej Leszczyński

SVG/CSS Text Animation

Dev: Cédric

Dev: Heather B.

Jalousie text animation

Dev: Jonas Sandstedt

Typewriter Text Animation

Dev: Aakhya Singh

2 in 2021 / Welcome / CSS Stylus Pug

Dev: Toshiya Marukubo

Dev: Elena Nazarova

Animated Text Gradient

Dev: chrishodges

Handwriting Animation (SVG + CSS)

Dev: Marina

Text-Shadow Animate

Dev: Wyatt Nolen

Animated text fill

Dev: Daniel Riemer

Wave text effect (with SVG/blend mode)

Dev: Lucas Bebber

CSS TEXT REVEALING ANIMATION

Dev: Nooray Yemon

See the Pen Smoky Text by Bennett Feely (@bennettfeely) on CodePen.

Dev: Bennett Feely

Liquid Type

See the Pen Liquid Type by Callum Martin (@Callum-Martin) on CodePen.

Dev: Callum Martin

Glowing text, music inspired

In/out of focus text effect

Dev: Jonny Scholes

Breathe (Coded on iOS)

Dev: Elisabeth Diang

CSS only Frozen text

Dev: Mandy Michael

Neon Lights

Dev: Cooper

Typed.scss: CSS-powered animated text

Dev: Brandon McConnell

Apple commercial animation

Dev: Alvaro Montoro

CSS : Background Clip

Dev: Amir Rahimi

Blazing Fire

Pure CSS | FadeIn Text with bars | KeyFrames & Scss

Dev: Kaio Almeida

See the Pen Luminance by Franklin Castellanos (@onecastell) on CodePen.

Dev: Franklin Castellanos

Word Swipe Animation

Dev: Eric Porter

DECONSTRUCTED

Dev: Bence Szabo

Spooky Typo

Dev: ilithya

Animated text fill with svg text practice

Dev: Cesar C.

CSS-only shimmering neon text

Drop : Gooey Effect

See the Pen Drop : Gooey Effect by Tushar Choudhari (@ctushr) on CodePen.

Dev: Tushar Choudhari

See the Pen Loader by Eric Huguenin (@Sirop) on CodePen.

Dev: Eric Huguenin

mix-blend-mode

Dev: Cassandra Rossall

See the Pen Neon Tex by Mohamed (@qpi65) on CodePen.

Dev: Mohamed

CSS Text-Shadow Animation

Dev: Faria Begum Riya

Glowing Text

Dev: Pratham

See the Pen SVG Text by ANA MAFLA (@ANAMAFLA) on CodePen.

Dev: ANA MAFLA

Slide to unlock shine

Dev: Andreas Storm

Text Animation

Dev: Sean Dempsey

See the Pen Superfont by Dee Pei (@dmpei) on CodePen.

Dev: Dee Pei

Animated Fire Text-Shadow

Dev: Antti Nyman

Super Shadows!

See the Pen Super Shadows! by Oliver Pope (@owebboy) on CodePen.

Dev: Oliver Pope

Text Animation with CSS – thank you screen!

Dev: Nooray Yemon

404 Animated Page

See the Pen 404 Animated Page by Vincent Van Goggles (@Gogh) on CodePen.

Dev: Vincent Van Goggles

[webkit] Animated “text-shadow” pattern

Dev: carpe numidium

Animated Text-Shadow

Dev: Erin E. Sullivan

Pure CSS Glitch Experiment (Twitch Intro WIP)

Dev: Elisabeth Diang

Clean CSS Glitch

See the Pen Clean CSS Glitch by Piotr Galor (@pgalor) on CodePen.

Dev: Piotr Galor

3D CSS Typography

Dev: Noah Blon

Easy Animation

Dev: Mark Mead

Pure CSS Typing Animation

Dev: Stephanie Eckles

See the Pen Spacious by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

Dev: Oliva Alonso

Masking Path Animation

Dev: Envato Tuts+

Источник

CSS Анимация с вариативным шрифтом

В процессе изучения некоторых супер-способностей CSS, моё внимание привлекли вариативные шрифты. В этой статье я покажу как их можно использовать для анимации начертания шрифта и дам краткий обзор последних дополнений CSS.

Некоторые из этих дополнений будут вам знакомы, а другие могут показаться свежими:

  • вариативные шрифты, подробнее об этом позже в статье.
  • @supports (“feature queries”) аналогичен media queries и позволяет прописать дополнительный функционал для более современных браузеров.
  • gap,row-gap, и column-gap расширяют возможности создания макетов с использованием Grid и Flexbox.
  • content-visibility или «ленивая загрузка» для HTML-элементов.
  • :is и :whereпсевдоклассы помогут снизить повторяемость.

Вариативные шрифты

Это эволюция спецификации шрифтов OpenType, которая позволяет включать несколько вариантов гарнитуры (font-family) в один файл вместо того, чтобы иметь отдельный шрифт-файл для каждого отдельного начертания (ширины, веса или курсива).

Теперь можно получить доступ ко всем вариантам, содержащимся в одном шрифт-файле, через @font-face CSS ссылку:

Один шрифт-файл, с множеством вариаций, обеспечивает дополнительную гибкость для указания точных значений. Например, следующий синтаксис становится возможным: font-weight: 234 .

Оси вариативности

Существуют 5 зарегистрированных осей, с четырех буквенными аббревиатурами:

  1. Вес (wght)
  2. Ширина (wdth)
  3. Курсивность (ital)
  4. Угол наклона (slnt)
  5. Оптический размер (opsz) и настраиваемые оси, открывающие дополнительные возможности для дизайна шрифтов.

Примечание: не все вариативные шрифты поддерживают 5 зарегистрированных осей, многие из них ограничены лишь несколькими. Поэтому, необходимо проверять спецификацию каждого шрифта перед использованием.

Доступ к зарегистрированным осям можно получить через свойство font-variation-settings, но также следует указать значение font-weight по-умолчанию чтобы обеспечить поддержку старых браузеров:

Если вы хотите узнать о преимуществах производительности и/или анатомической структуре вариативных шрифтов, проверьте эти ссылки:

Анимация с вариативным шрифтом

Так как font-variation-settings охватывают диапазон значений, а не только увеличение с шагом 100, как в font-weight , начертание шрифта можно плавно анимировать:

В данном случае я обернула каждую букву в h1 в отдельный span и создала эффект волны с использованием задержек анимации для каждого : nth-child () . Вот как это выглядит в коде:

h1 span:nth-child(1) < animation-delay: var(--var-base-delay); >h1 span:nth-child(2) < animation-delay: calc(var(--var-base-delay) + 200ms); >h1 span:nth-child(3) < animation-delay: calc(var(--var-base-delay) + 400ms); >h1 span:nth-child(4) < animation-delay: calc(var(--var-base-delay) + 600ms); >/* etc. till the last letter */
/* variable font wave animation */ @keyframes wave < 0% < font-variation-settings: "wght" 100, "wdth" 80; >40% < font-variation-settings: "wght" 200, "wdth" 85; >60% < font-variation-settings: "wght" 500, "wdth" 95; >80% < font-variation-settings: "wght" 700, "wdth" 90; >100% < font-variation-settings: "wght" 789, "wdth" 100; >>

Немножко дизайнерской магии

Еще одна светлая сторона вариативных шрифтов заключается в том, что они предоставляют возможность дизайнерам, как Дэвид Берлоу, анимировать персонажей (в данном случае emoji):

Надеюсь, мне удалось разжечь в вас искру интереса. Я буду рада увидеть ваши анимации или другие варианты использования вариативных шрифтов.

Песочницы и доступные шрифты:

Источник

Читайте также:  1с html документ чтение
Оцените статью
© 2024 Программирование