Animation Punkt nach Punkt aus einem Bild mit CSS3 oder jQuery

Question

Ich möchte Punkt nach Punkt aus dem Bild unten, aber mein Problem ist mit dem gekrümmten Abschnitt des Bildes (unten im Bild).

Zu Beginn sollten alle Punkte ausgeblendet werden und dann eins nach dem anderen jeder Punkt sollte in Sicht animiert werden.

Ich habe den folgenden Code:

<div id="dots1"></div> 

#dots1 { 
    -moz-transition: height 1s linear; 
    -o-transition: height 1s linear; 
    -webkit-transition: height 1s linear; 
    transition: height 1s linear; 
    position: absolute; 
    left: 50%; 
    z-index: 1; 
    margin: 0 0 0 -1px; 
    width: 3px; 
    height: 0; 
    background: url(image/pic.png) 0 0 no-repeat; 
} 

Answer 1

Versuchen Sie Folgendes:

HTML

<div id="dots"> 
    <img src="http://i.stack.imgur.com/oxUh8.png"> 
</div> 

jQuery

$("#dots").css("height", "514px"); 

CSS

#dots{ 
    overflow: hidden; 
    height: 10px; 
    transition: all 3s cubic-bezier(.5, 1, 0, .5); 
} 

See: https://jsfiddle.net/brezkryx/

Answer 2

Sie diesen Effekt erzielen können zwei SVG path Elemente wie in dem unten stehenden Schnipsel verwenden. Es werden zwei Pfade in Form der gebogenen Linie erstellt, die Sie benötigen. Ein Pfad (der sich unten befindet) enthält das Punktmuster für den Strich (schwarz) und einen weiteren doppelten Pfad, der sich oben befindet. Der Duplicate-Pfad-Strich ist so eingestellt, dass er für die gesamte Länge des Pfads weiß und für eine andere Länge transparent ist.

Eine Animation wird zum doppelten Pfad hinzugefügt, um den Offset des Strichs zu animieren. Wenn der Versatz animiert wird, bewegt sich der weiße Teil des Strichs langsam aus der Sicht und der transparente Teil wird sichtbar. Wenn der weiße Teil aus dem Blickfeld verschwindet, werden die schwarzen Punkte darunter sichtbar.

Es ist ein bisschen komplex zu Beginn zu verstehen, aber sobald Sie vertraut mit path, stroke-dasharray und stroke-dashoffset wird es einfach aussehen.

svg { 
 
    height: 400px; 
 
} 
 
path { 
 
    fill: none; 
 
} 
 
path.dot { 
 
    stroke: black; 
 
    stroke-dasharray: 0.1 4; 
 
    stroke-linecap: round; 
 
} 
 
path.top { 
 
    stroke: white; 
 
    stroke-width: 2; 
 
    stroke-dasharray: 250; 
 
    stroke-linecap: round; 
 
    animation: dash 15s linear forwards; 
 
} 
 
@keyframes dash { 
 
    from { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    to { 
 
    stroke-dashoffset: -250; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg viewBox='0 0 100 100'> 
 
    <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='dot' /> 
 
    <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='top' /> 
 
</svg>