Линия рисования анимации с чистым css

Question

Есть ли способ реализовать анимацию CSS, в которой точка растет, чтобы быть линией?

point l (a dot) ---------------------------> point m (a line) 

Я знаю, что это может быть сделано с SVG, но я хочу знать, если это можно реализовать с чистым CSS.

Answer 1

Использование Transition property в CSS, вы можете придать эффект рисования эффекту div, нацелив его на width.

Наведите указатель мыши на orange цвет точка на экране результатов.

.point { 
 
width: 6px; 
 
height: 6px; 
 
background: tomato; 
 
    transition: width 1s ease; 
 
} 
 
.point:hover { 
 
width: 200px; 
 
}

<div class="point"></div>

Answer 2

Вы можете использовать границу элемента с 1px, который растет до нужной длины.

Используя @keyframes и animation свойства, вы можете получить это, чтобы начать с загрузки страницы.

div{ 
 
    height:0px; 
 
    width:1px; 
 
    border-bottom:1px solid #000; 
 
    
 
    -webkit-animation: increase 3s; 
 
    -moz-animation: increase 3s; 
 
    -o-animation:  increase 3s; 
 
    animation:   increase 3s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes increase { 
 
    100% { 
 
     width: 300px; 
 
    } 
 
}

<div></div>