<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#st {
border: 5px solid rgba(0, 143, 255, 0.5);
width: 200px;
height: 100px;
border-radius: 10px;
}
.clicked {
animation: fade-bodred 3s linear alternate;
}
@keyframes fade-bodred {
0% {
border-color: rgba(0, 143, 255, .5);
}
50% {
border-color: rgba(255, 0, 0, 1);
}
}
</style>
</head>
<body>
<a class="in" href="#">добавить</a>
<div id="st"></div>
<script type="text/javascript">
$('.in').on('click', function() {
$('#st').addClass('clicked');
});
$('#st').on('animationend', function () {
$(this).removeClass('clicked');
});
</script>
</body>
</html>