Скачки анимации transition

https://jsfiddle.net/vw5cm842/1/ Простые аналоговые часы на чистом css, без картинок. Добавление к секундной стрелке правила transition: transform 250ms cubic-bezier(.5, -1, .5, 2); вызывает резкий рывок секундной стрелки на целый оборот при прохождении нулевой отметки (вертикально вверх). В чем причина такого поведения и как от нее избавиться?

<div id="container" style="background: red; width:60%">
        <div class="clock-wrap">
            <section>
                <div class="display"></div>
                <div class="hourhand-container">
                    <div class="hourhand"></div>
                </div>
                <div class="minutehand-container">
                    <div class="minutehand"></div>
                </div>
                <div class="secondhand-container">
                    <div class="secondhand"></div>
                </div>
                <div class="center-dot"></div>
                <div class="hour12"></div>
                <div class="hour1"></div>
                <div class="hour2"></div>
                <div class="hour3"></div>
                <div class="hour4"></div>
                <div class="hour5"></div>
            </section>
        </div>
    </div>
Styles
.clock-wrap {
        overflow: hidden; 
        position: relative; 
        width: 100%; 
        padding-bottom: 100%;
    }
    section {
        width: 100%;
        height: 100%;
        background: #000;
        border-radius: 50%;
        position: absolute;
        z-index: 1;
    }
    .label {
        position: absolute;
        top: 19vmin;
        left: 46%;
        font-size: 2.5vmin;
    }
    .hourhand,
    .secondhand,
    .minutehand {
        height: 100%;
        background: #000;
        z-index: 2;
    }
    .hourhand:after,
    .secondhand:after,
    .minutehand:after {
        content: '';
        background: #000;
        width: 20%;
        height: 100%;
        z-index: 3;
        position: absolute;
        top: 0;
        left: -20%;
    }
    .hourhand-container {
        width: 100%;
        height: 2%;
        position: absolute;
        top: 49%;
    }
    .hourhand {
        border-top-right-radius: 20%;
        border-bottom-right-radius: 20%;
        box-shadow: -10px 0px 10px rgba(0,0,0,.4);
        width:30%;
        left: 50%;
        position: relative;
        z-index: 2;
    }
    .minutehand-container {
        width: 100%;
        height: 2%;
        position: absolute;
        top: 49%;
    }
    .minutehand {
        width: 40%;
        height: 100%;
        top: 0%;
        border-top-right-radius: 30%;
        border-bottom-right-radius: 30%;
        box-shadow: -10px 10px 10px rgba(0,0,0,.4);
        left: 50%;
        position: relative;
        z-index: 3;
    }
    .secondhand-container {
        width: 100%;
        height: 2%;
        position: absolute;
        top: 49%;
    }
    .secondhand {
        width: 45%;
        height: 40%;
        top: 30%;
        box-shadow: -10px -10px 10px rgba(0,0,0,.4);
        position: relative;
        left: 50%;
        z-index: 4;
    }
    .hour12, .hour1, .hour2, .hour3, .hour4, .hour5 {
        width: 90%;
        height: 1%;
        top: 49.5%;
        position: absolute;
        left: 5%;
    }
    .hour12:after, .hour1:after, .hour2:after, .hour3:after, .hour4:after, .hour5:after {
        content: "";
        width: 8%;
        background: black;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .hour12:before, .hour1:before, .hour2:before, .hour3:before, .hour4:before, .hour5:before {
        content: "";
        width: 8%;
        background: black;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .hour3 { transform: rotate(90deg); }
    .hour1 { transform: rotate(120deg); }
    .hour2 { transform: rotate(150deg); }
    .hour4 { transform: rotate(210deg); }
    .hour5 { transform: rotate(240deg); }
    .display {
        background: #fff;
        height: 95%;
        width: 95%;
        border-radius: 50%;
        position: absolute;
        left: 2.5%;
        top: 2.5%;
        box-shadow: inset 40px 40px 90px rgba(0,0,0,.2), inset 10px 10px 30px rgba(0,0,0,.5);
    }

    .secondhand-container {
        transition: transform 250ms cubic-bezier(.5, -1, .5, 2);
    }
    .center-dot {
        border-radius: 50%;
        background: #352f2f;
        top: 47.5%;
        left: 47.5%;
        width: 5%;
        height: 5%;
        position: relative;
    }
Script
const hourhand = $(".hourhand-container");
        const minutehand = $(".minutehand-container");
        const secondhand = $(".secondhand-container");
        function tick() {
           var date = new Date();
           var seconds = date.getSeconds();
           var minutes = date.getMinutes();
           var hours = date.getHours();
           var secAngle = seconds * 6 - 90;
           var minAngle = minutes * 6 + seconds * (360/3600) - 90;
           var hourAngle = hours * 30 + minutes * (360/720) - 90;
           secondhand.css('transform', 'rotate(' + secAngle + 'deg)');
           minutehand.css('transform', 'rotate(' + minAngle + 'deg)');
           hourhand.css('transform', 'rotate(' + hourAngle + 'deg)');
        }
        setInterval(tick, 1000);