Анимировать пунктирную диагональную линию

Question

Я использовал Animate diagonal line query , и он отлично работает.

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

Любые предложения будут высоко оценены.

Answer 1

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

http://codepen.io/anon/pen/qORzbe

<div class="box"> 
    <svg height="200" width="200" class="line1"> 
     <line fill="none" stroke="black" x1="0" y1="0" x2="200" y2="200" stroke-dasharray="5, 5" /> 
    </svg> 
    <div class="mask"></div> 
</div> 

.box { 
    overflow: hidden; 
    outline: dotted 1px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 
.mask { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    z-index: 10; 
    background-color: white; 
    background-repeat: no-repeat; 
    animation: showDiag 2s linear forwards; 
} 

@keyframes showDiag { 
    from { left: 0; top: 0; } 
    to { left: 200px; top: 200px; } 
}