/* entry animations */
.ht_ctc_entry_animation {
    animation-duration: center;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

@keyframes center {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.ht_ctc_an_entry_center {
    animation: center 0.25s;
}

/* animations */

/* 
$an_list =[ 'bounce',
'flash',
'pulse',
'heartBeat',
'flip',
];

$an_duration ='1s';
$an_delay ='';
$an_delay ='';
$an_itr ='1';

foreach ($an_list as $an_type) {
    $animations->animations($an_type, $an_duration, $an_delay, $an_itr );

} */

.ht_ctc_animation {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

/* bounce */
@keyframes bounce {
    from,
    20%,
    53%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0) scaleY(0.95);
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

.ht_ctc_an_bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}

/* flash */
@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.ht_ctc_an_flash {
    animation-name: flash;
}

/* pulse */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.ht_ctc_an_pulse {
    animation-name: pulse;
    animation-timing-function: ease-in-out;
}

/* heartBeat */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

.ht_ctc_an_heartBeat {
    animation-name: heartBeat;
    animation-duration: calc(1s * 1.3);
    animation-timing-function: ease-in-out;
}

/* flip */
@keyframes flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

.ht_ctc_an_flip {
    backface-visibility: visible;
    animation-name: flip;
}