css3 - I can't stop the css/jquery animation on focus -

i want stop animation of span on focus of input.

when doing hover, there no problem, good. want stop span when focus input. problems here. code here.

actualy want css not scss. here

and html :

<link href='https://fonts.googleapis.com/css?family=open+sans:300' rel='stylesheet' type='text/css'>  <section id="text">   <p><span> İsİm</span><input name="name" type="text" placeholder="İsminiz" /></p>    <p><span> konu </span><input name="subject" type="text"  placeholder="konu"/></p>    <p><span> maİl </span><input name="mail" type="email"  placeholder="mailiniz"/></p>    <p><span> mesaj </span><textarea name="message" type="text" placeholder="mesajınız"></textarea>   </section> 

css:

  .aktif1{width:100px;transition:1s;} .aktif2{width:450px;transition:1s;}  body{   background:#f7f7f7; }  p{   position: relative;   width:450px; }  section#text{   position:relative;   margin-left:500px;   margin-top:150px; }  p input{   outline:none;   width:330px;   height:40px;   padding-left:120px; }  p textarea{   outline:none;   max-width:330px;   max-height:40px;   width:330px;   height:40px;   padding-left:120px; }   p span{   width:455px;   height:45px;   background:#333;   position: absolute;   color:white;   text-align:center;   line-height:50px;   font-family: 'open sans', sans-serif;   font-weight:bold;   transition:1s; } 

jquery:

$(function() {   fonk1();   $('section#text input').focus(function(){     fonk1().stop();   });      fonk2();   $('section#text input').blur(function(){      fonk2();   }); });   var fonk1 = function(){   $('section#text p').mouseenter(function(){       $('span',this).animate(1000,function(){           $(this).css({'width':'100'});       });   }); }  var fonk2 = function(){   $('section#text p').mouseleave(function(){     $('span',this).animate(1000,function(){           $(this).css({'width':'450'});       });   }); } 

i played lot script.
had fun forgot question! .oo(lol)

i went way further it's scope...
answer trial redo changes step step.

----- step 1
here the basics first changed...
may enought answer animation bug have.
removed lot script here.
said in comments, mixing .animate() ans .css()...
, don't why create function call function in case.
confusing on event call, maybe...
cleaned it.

----- step 2
then... «i want stop span when focus input»
which suppose real question here:

i think went bit further here.... understanding want span stay put on left when field not empty... no matter if field focussed or not.
that's i've done next! ;)

i've wrapped mouseleave script condition:

if( $(this).children("input").val() == "" ){ 

----- step 3
and, thank actual real fun (!)...
here now script.

this makes nice input forms !
again, thank you, made day!

----- step 4
future!
add input validation before adding checkmark span.
have a red x if "non-conform".
stop here now.
;)