Как можно анимировать данные псевдоэллементы?

Question

[Денис]

https://codepen.io/fristyr/pen/MRWaoY

Задача такова: Я бы хотел сделать чтобы кругу и ромбу (::before ::after) анимацию что то вроде рисования. Начало от 0 до того пока фигура не закончится и обратно. Возможно ли вообще такое для таких псевдоэллементов? Я пробовал через бордер радус и тени но они лишь делают анимацию всей фигуры сразу изза толщины, появляется а потом затухает. А нужно что то вроде линии которая идет он начала до конца рисуя фигуру

Comments

[x404]

Боюсь без svg это сделать нельзя.

Answer 1

[Ragtime Kitty]

Можно нарисовать что угодно внутри одного единственного псевдоэлемента, через svg и data -

Т.е. делаете svg, анимируете его как хотите, переделываете в data url и запихуеваете в background, вуаля.
За рациональность и производительность не ручаюсь.

Comments

[Денис]

Хм, не знал не знал. Благодарю за ответ

Answer 2

[Ivan Bogachev]

С квадратом еще можно было бы пошаманить с градиентами, но "нарисовать" круг из одного псевдоэлемента на CSS не получится. Так что вам стоит смотреть в сторону SVG и анимирования свойства stroke-dashoffset. Почитать про это можно в статье.