Dilettante_Pro, спасибо. В общем так это выглядит в собранном виде. Единственное, что я не понял - почему-то, если тело скрипта находится выше кнопки «добавить», то скрипт не срабатывает. Не знаете, почему?
<!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;
}
@keyframes fade-bodred {
0% {
border-color: rgba(0, 143, 255, .5);
}
50% {
border-color: rgba(255, 0, 0, 1);
}
100% {
border-color: rgba(0, 143, 255, .5);
}
}
</style>
</head>
<body>
<a class="in" href="#">добавить</a>
<div id="st"></div>
<script type="text/javascript">
$('.in').on('click', function() {
$('#st').addClass('clicked');
setTimeout(function() {
$('#st').removeClass('clicked');
}, 3000);
});
</script>
</body>
</html>