CSS3またはjQueryを使用して画像からドット後のドットをアニメ化する

Question

下の画像からドット後にアニメーションを適用したいが、私の問題は画像の湾曲したセクション（画像の下）にある。

開始時に、全てのドットが隠され、その後、各ドットは、ビューにアニメーションする必要があります一つ一つべきです。

私は以下のコードがあります。

<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

は、以下のことを試してみてください。

HTML

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

jQueryの

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

を10

CSS

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

参照：https://jsfiddle.net/brezkryx/

Answer 2

あなたは以下のスニペットのように2つのSVG path要素を使用してこの効果を実現することができます。必要な曲線の形の2つのパスが作成されます。 1つのパス（下部にあります）は、ストローク（黒色）のドットパターンと、上にある別の重複パスを持っています。複製パスストロークは、パスの1つの全長に対して、色が白色であり、別の長さでは透明であるように設定される。

ストロークのオフセットをアニメーション化するために、複製パスにアニメーションが追加されます。オフセットがアニメートされると、ストロークの白い部分がゆっくりと視界から外れ、透明部分が表示され始めます。白い部分が見えなくなると、その下の黒い点が現れ始めます。

最初は理解するのが少し複雑ですが、path、stroke-dasharray、stroke-dashoffsetに慣れたら、簡単に見えます。

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>