How To Superpose A Textarea And A Svg

I'm trying to make an animation (With a SVG Path) on a textarea: I have two div : Svg :

Solution 1:

You may just use backgrounds and animate them :

textarea{
  resize:none;
  border:none;
  border-radius:0;
  width:400px;
  height:100px;
  left:10px;
  position:relative;
  display:block;
  text-align:left;
  cursor:left;
  background: #f0f0f0;
  -webkit-appearance: none;
  background:
    linear-gradient(to left, black, black)  no-repeat,    
    linear-gradient(to top, black, black)  no-repeat,    
    linear-gradient(to right, black, black) no-repeat,    
    linear-gradient(to bottom, black, black)  no-repeat
    ;
  background-position: left bottom  ,right 100px , 500px top,left -100px ; 
  background-size: 100%2px, 2px100%;
  animation : bordout 0.5s linear reverse;
}
textarea:hover {
  animation : bordin 0.5s linear forwards;
}
@keyframes bordin {
  33% {
    background-position: left bottom  ,right 0, 500px top, left -100px;
  } 
  66% {
    background-position: left bottom  ,right 0 , 0 top, left -100px;
  }
  100%  {
    background-position: left bottom  ,right 0 , 0 top, left 0;
  }
}
@keyframes bordout {
  33% {
    background-position: left bottom  ,right 0, 500px top, left -100px;
  } 
  66% {
    background-position: left bottom  ,right 0 , 0 top, left -100px;
  }
  100%  {
    background-position: left bottom  ,right 0 , 0 top, left 0;
  }

}

<textareaplaceholder="message"></textarea>

or inside a codepen (with auto prefix) to play with

Share