純粋なCSSを使った線画アニメーション

Question

ドットが線になるようなCSSアニメーションを実装する方法はありますか？

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

これはSVGで行うことができますが、純粋なCSSで実装できるかどうかを知りたいと思います。

Answer 1

Transition propertyをCSSに設定すると、widthというプロパティをターゲットに設定してdivに効果描画効果を与えることができます。

オレンジカラードットオン結果画面。あなたが必要な長さに成長する1ピクセルを持つ要素に境界線を使用することができ

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

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

Answer 2

。

@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>