Get CSS animation fluid

Question

If you hit on the paperplane below I have implemented an animation that mirrors the triangle and switches the colors, but I am struggling to get it fluid. It kind of stucks sometime und you get ugly white lines inbetween the animation. Does anyone know how to improve this code or have an alternative (better) way to accomplish my animation.

$('.contact .topbar .paperplane').click(function(){
  if($('.contact').hasClass('active')){
    $('.contact').removeClass('active');
  }else{
    $('.contact').addClass('active');
  }
});

.contact{
	position:relative;
	background:#445;
}
.contact .topbar{
	height:200px;
	
	background:linear-gradient(to bottom, #fff 50%, #445 50%);
	background-size: 100% 200%;
    background-position:top right;
	transition:1s;
}
.contact .topbar .paperplane{
	width:75px;
	height:75px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	cursor:pointer;
	
	animation: bounce 5s infinite;
}
.contact .topbar .paperplane path{
	fill:#aab;
	transition:0.2s;
}
.contact .topbar .paperplane:hover path{
	fill:#445;
    transition:1s;
}
.contact .topbar .arrowDown{
	height:200px;
	width:100%;
	position:absolute;
	top:0;
	transition:1s;
}
/*	active*/
.contact.active .topbar{
	background-position:bottom right;
}
.contact.active .topbar .arrowDown{
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}
.contact.active .topbar .arrowDown polygon{
	fill:#fff;
	transition-delay:0.5s;
}
.contact.active .topbar .paperplane:hover path{
  fill:#fff;
}

@keyframes bounce {
	0% {
		top:50%;
	}
	25%{
		top:50%;
	}
	/*	---	*/
	32%{
		top:52%;
	}
	35% {
		top:40%;
	}
	40%{
		top:50%;
	}
	/*	---	*/
	70%{
		top:50%;
	}
	77%{
		top:52%;
	}
	80% {
		top:40%;
	}
	85%{
		top:50%;
	}
	/*	---	*/
	92%{
		top:52%;
	}
	95%{
		top:40%;
	}
	100% {
		top:50%;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="contact">
		<div class="topbar">
			<svg version="1.1" class="arrowDown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
				 viewBox="0 0 1000 125" enable-background="new 0 0 1000 125" xml:space="preserve" preserveAspectRatio="none">
				<polygon fill="#445" points="0,0 500,125 0,125"/>
				<polygon fill="#445" points="1000,0 500,125 1000,125"/>
			</svg>
			<svg version="1.1" class="paperplane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 334.5 334.5" style="enable-background:new 0 0 334.5 334.5;" xml:space="preserve"> <path d="M332.797,13.699c-1.489-1.306-3.608-1.609-5.404-0.776L2.893,163.695c-1.747,0.812-2.872,2.555-2.893,4.481 s1.067,3.693,2.797,4.542l91.833,45.068c1.684,0.827,3.692,0.64,5.196-0.484l89.287-66.734l-70.094,72.1 c-1,1.029-1.51,2.438-1.4,3.868l6.979,90.889c0.155,2.014,1.505,3.736,3.424,4.367c0.513,0.168,1.04,0.25,1.561,0.25 c1.429,0,2.819-0.613,3.786-1.733l48.742-56.482l60.255,28.79c1.308,0.625,2.822,0.651,4.151,0.073 c1.329-0.579,2.341-1.705,2.775-3.087L334.27,18.956C334.864,17.066,334.285,15.005,332.797,13.699z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
		</div>
	</section>

Answer 1

This seems to remove the glitchy looking white lines: JSFiddle

Basically I just replaced your filter: FlipV; with an animation that toggles on click:

@keyframes flip {
  0% {transform:rotateX(0)}
  50% {transform:rotateX(180deg)}
  100% {transform:rotateX(360deg)}
}

I stripped out some of the other CSS that I thought was interfering a bit (the plane turns white on hover so I couldn't see it), if you diffed it with your OP you could see what's been removed ...

you could also update the JS to prevent the animation skipping if a user clicks a bunch of times:

var timer;
var animDuration = 2000; // sync with `flip` animation
var bind = function(){
  $('.paperplane').on('click', function(){
    $(this).off('click');
    $('.contact').toggleClass('active');
    timer = setTimeout(function(){
      $('.contact').toggleClass('active');
      bind();
    }, animDuration);
  });
};

bind();

Although you don't get the nice positive/negative effect when you flip it ...