フォーカスしているSVG図の図面をアニメーション化する最も簡潔な方法は何ですか？

Question

私はこの（一見）シンプルな少しの強化をサイトでやってきました。私は助けを求めることにしました。

私は置くためにどのようにSVGをアニメーション化する方法を考え出したが、していない、この動画のようにhttp://tinypic.com/r/ofrb4h/9

、フォーカス上の入力エリアを中心にアニメーションや描画する私の連絡先フォームフィールドの概要を希望それが私のフォームの上にあり、また、これが最善の方法であるかどうかは分かりません。ここで

はそれと一緒に行くためのHTMLコードとCodePenです：

<div class="container-div"> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 444 501" class="blue"> 
    <path class="outline-path" id="outline" 
      fill="none" stroke="teal" stroke-width="3" 
      d="M 385.00,193.50 
      C 404.00,195.75 406.25,228.00 385.25,230.75 
       385.25,230.75 67.00,230.25 67.00,230.25 
       46.50,228.75 45.25,197.25 67.25,193.25 
       67.25,193.25 385.00,193.50 385.00,193.50 Z" /> 
    </svg> 
</div> 

<form class="contact-form"> 
    <div class="form-group"> 
     <p>Name:</p> <label for="name">Full Name</label><input type="text"  class="form-inline name-input" name="name" id="name" placeholder="Cal  Critter"oninput="nameFunction()"></input> 
     <br> 
     <p>Email:</p> <label for="email">Email</label><input type="email"  class="form-inline email-input" name="email" id="email"  placeholder="reachme@email.com" oninput="emailFunction()"></input> 
     <br> 
     <p>Rough Budget:</p> <div class="selectdiv"><label  for="budget">Budget</label><select name="budget" id="budget" class="budget- input" > 
      <option class="select-dropdown" value="Less Than $5,000"  selected>Less Than $5,000</option> 
      <option class="select-dropdown" value="$5,000 - $20,000">$5,000  - $20,000</option> 
      <option class="select-dropdown" value="$20,000 -  $50,000">$20,000 - $50,000</option> 
      <option class="select-dropdown" value="$50,000 -  $100,000">$50,000 - $100,000</option> 
      <option class="select-dropdown" value="$100,000 -  $500,000">$100,000 - $500,000</option> 
      <option class="select-dropdown" value="More Than $500,000">More  Than $500,000</option> 
      <option class="select-dropdown" value="?">?</option> 
     </select> 
     </div> 
     <br> 
     <p>Message:</p> <label for="message">Message</label><textarea  class="form-inline message-input" name="message" id="message" rows="10"  cols="30" placeholder="Tell us a little about your project here..."  oninput="messageFunction()"></textarea> 
    </div> 
    <button class="" type="submit">SEND</button> 
    </form> 

https://codepen.io/AshleyMSherwood/pen/bREawx

私は事前に

おかげで何か提案は本当にいただければと思います！

Answer 1

フォーカスのエフェクトをトリガーするには、このコードを使用します。

var inputBox = document.querySelector('input'); 
inputBox.addEventListener('focus', function(){ 
    document.querySelector('path').classList.add('outline-path'); 
    document.querySelector('.container-div').style.display = "block"; 
}) 

「blur」の効果を削除するには、このコードを追加します。

inputBox.addEventListener('blur', function(){ 
    document.querySelector('.container-div').style.display = "none"; 
    document.querySelector('path').classList.remove('outline-path'); 
})