Анимация появления текстового символа

#css #css3 #html5 #svg #css_animation

У меня есть svg изображение буквы А которая составлена из трех элементов:
двух параллелограммов и прямоугольника - перекладины.  

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







    

Ответы

Ответ 1

Вот вариант, где opacity считается по дельта времени между кадрами.



let left = document.querySelector('#left')
let right = document.querySelector('#right')
let rect1 = document.querySelector('#rect1')
let time = 3000; // время анимации 
let delay = 1000; // задержка перед анимацией

// dt - кол-во миллисекунд с начала анимации
function animate(dt) { 
 let v = dt - delay;  
 opacity(left, v/time*3);     
 opacity(right, v/time*3 - 1);
 opacity(rect1, v/time*3 - 2);
 dt < time + delay + 50 && requestAnimationFrame(animate)
} 

function opacity(el, v) {
 v = Math.min(1, Math.max(v, 0)); // приводим к диапазону 0-1
 el.setAttribute('opacity', v)
}

requestAnimationFrame(animate);




Ответ 2

Вот такой вот эффект c background-image и keyframes.

Для этого группа фигур из оригинала была переделана в маску для прямоугольника.








В ходе выполнения было замечено что у оригинала svg viewbox и width, height перепутаны...


Ответ 3

.letter {
  width:200px;height:auto;
  stroke-width:2.5;
  stroke:#000;
  fill:none;
  stroke-dasharray: 0 24;
}
.animateFirst { animation: 0.5s animateFirst ease-in forwards; }
.animateSecond { animation: 0.2s 0.45s animateSecond ease-out forwards; }

@keyframes animateFirst {
  to { stroke-dasharray: 24 24; }
}
@keyframes animateSecond {
  to { stroke-dasharray: 6 24; }
}





Источник ответа:@web-tiki


Ответ 4

SVG решение

Все элементы анимации в начале невидимы fill-opacity="0"  

Анимация появления одного элемента:

                


Последовательность выполнения анимаций достигается цепочкой условиё в атрибуте begin="an_left.end"    

Такая запись означает что анимация правого прямоугольника начнется только после окончания
анимации левого многоугольника  

Ниже полный код: 



.container {
width:35%;
height:35%;
}







CSS решение



.container {
width:35%;
height:35%;
}
#left,#right,  #rect1 {
fill-opacity:0;
fill:#008080;

}
#left {
animation:anLeft  0.3s ease forwards;
animation-delay: 0.1s;
}

@keyframes anLeft {
  100% {
    fill-opacity:1;
	
  }
} 
#right {
animation:anRight  0.3s ease forwards;
animation-delay: 0.4s;
}

@keyframes anRight {
  100% {
    fill-opacity:1;
  }
}  

#rect1 {
animation:anRect  0.3s ease forwards;
animation-delay:0.7s;
}

@keyframes anRect {
  100% {
    fill-opacity:1;
  }
}







Второй вариант



.container {
 width:35%;
 height:35%;
 }







Источник ответа:@Alexandr_TT