Develop Reference

How make the input go from draging to pressing left and right

Hello I don't really understand javascript well because I only use python typically. and I'm doing this javascript project and I want to make it where the input is not dragging and instead it is left and right.
So like when you move the lock all your have to do is press the arrow keys. Any help would greatly be very very nice.
JS
// make dial draggable
Draggable.create(".dial", {
type:"rotation",
throwProps:true
});
// values 40 or above will be set to 0
const combo = [20, 5, 30],
findCombo = function(comboArr){
let dial = $(".dial"),
dialTrans = dial.css("transform"),
ticks = 40,
tickAngle = 360 / ticks,
numOffset = 0.5, // how far red arrow can be from number
// break down matrix value of dial transform and get angle
matrixVal = dialTrans.split('(')[1].split(')')[0].split(','),
cos1 = matrixVal[0],
sin = matrixVal[1],
negSin = matrixVal[2],
cos2 = matrixVal[3],
angle = Math.round(Math.atan2(sin, cos1) * (180 / Math.PI)) * -1;
// convert negative angles to positive
if (angle < 0) {
angle += 360;
}
// check numbers found, stop loop if at first number not found
for (let i = 0; i < comboArr.length; ++i) {
if (!$(".num" + (i + 1)).hasClass("found")) {
if (angle > (comboArr[i] - numOffset) * tickAngle &&
angle < (comboArr[i] + numOffset) * tickAngle) {
// make numbers green when found
$(".num" + (i + 1)).addClass("found");
// on unlock
if (i == comboArr.length - 1) {
$(".shackle").addClass("unlocked");
$(".top").addClass("pivot1");
$(".inner").addClass("pivot2");
$(".left").addClass("moveRight");
$(".dentL, .dentR").addClass("moveLeft");
// then lock again
setTimeout(function() {
$(".shackle").removeClass("unlocked");
$(".top").removeClass("pivot1");
$(".inner").removeClass("pivot2");
$(".left").removeClass("moveRight");
$(".dentL, .dentR").removeClass("moveLeft");
$("body").attr("style","background: black;");
$(".sitelocker").attr("style","display:none;");
$(".mainsitebody").removeAttr("style");
for (let j = 0; j < combo.length; ++j) {
$(".num" + (j + 1)).removeClass("found");
}
}, 2400);
}
}
break;
}
}
};
// dial interaction (mouse)
$(".dial").on("click",function(){
findCombo(combo);
});
// dial interaction (touch)
$(".dial").on("touchend",function(){
findCombo(combo);
});
CSS
.sitelocker {
counter-reset: inc -5;
font-family: Open Sans, sans-serif;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
margin-bottom: 18px;
position: relative;
height: 270px;
width: 180px;
}
.lock, .dial {
border-radius: 50%;
}
.arrow, .dial {
margin: auto;
}
.shackle, .dial, .tick {
position: absolute;
}
.lock {
background: #aaa;
position: absolute;
bottom: 0;
height: 180px;
width: 180px;
}
.shackle {
bottom: 108px;
right: 22.5px;
width: 135px;
height: 168.75px;
will-change: transform;
z-index: -1;
}
.shackle div {
background: #999999;
position: absolute;
will-change: transform;
}
.shackle .top {
border-radius: 135px 135px 0 0;
height: 67.5px;
width: 135px;
transform-origin: 100% 0;
}
.shackle .inner {
background: #fff;
border-radius: 50%;
top: 33.75px;
left: 33.75px;
height: 67.5px;
width: 67.5px;
}
.shackle .left, .shackle .right {
top: 66.5px;
width: 33.75px;
}
.shackle .left {
border-radius: 0 0 6.75px 6.75px;
height: 94.5px;
overflow: hidden;
position: relative;
}
.shackle .left .dentL, .shackle .left .dentR {
position: absolute;
bottom: 16.875px;
z-index: 2;
}
.shackle .left .dentL {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-left: 15px solid #fff;
left: -30px;
}
.shackle .left .dentR {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-right: 15px solid #fff;
right: 0;
}
.shackle .right {
right: 0;
height: 135px;
}
.arrow {
border: 7.5px solid transparent;
border-color: #a00 transparent transparent transparent;
margin-top: 11.25px;
margin-bottom: 3px;
transform: translateY(7.5px);
height: 0;
width: 0;
}
.dial {
background: #333 radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 30px, #1a1a1a 30px, #1a1a1a 32.25px, rgba(0, 0, 0, 0) 32.25px, rgba(0, 0, 0, 0));
font-family: Helvetica, sans-serif;
left: 0;
right: 0;
bottom: 7.2px;
position: absolute;
height: 144px;
width: 144px;
transform: rotate(0deg);
will-change: transform;
z-index: 1;
}
.tick {
background: #fff;
color: #fff;
font-size: 15px;
top: 72px;
left: 70.5px;
width: 3px;
height: 9px;
transform-origin: 50% -63px;
}
.tick::before {
display: block;
margin: -18px -18px 0 -18px;
text-align: center;
transform: rotate(180deg);
}
.tick:nth-of-type(1) {
transform: translateY(63px) rotate(180deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(180deg);
}
.tick:nth-of-type(1)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(2) {
transform: translateY(63px) rotate(189deg);
}
.tick:nth-of-type(3) {
transform: translateY(63px) rotate(198deg);
}
.tick:nth-of-type(4) {
transform: translateY(63px) rotate(207deg);
}
.tick:nth-of-type(5) {
transform: translateY(63px) rotate(216deg);
}
.tick:nth-of-type(6) {
transform: translateY(63px) rotate(225deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(225deg);
}
.tick:nth-of-type(6)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(7) {
transform: translateY(63px) rotate(234deg);
}
.tick:nth-of-type(8) {
transform: translateY(63px) rotate(243deg);
}
.tick:nth-of-type(9) {
transform: translateY(63px) rotate(252deg);
}
.tick:nth-of-type(10) {
transform: translateY(63px) rotate(261deg);
}
.tick:nth-of-type(11) {
transform: translateY(63px) rotate(270deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(270deg);
}
.tick:nth-of-type(11)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(12) {
transform: translateY(63px) rotate(279deg);
}
.tick:nth-of-type(13) {
transform: translateY(63px) rotate(288deg);
}
.tick:nth-of-type(14) {
transform: translateY(63px) rotate(297deg);
}
.tick:nth-of-type(15) {
transform: translateY(63px) rotate(306deg);
}
.tick:nth-of-type(16) {
transform: translateY(63px) rotate(315deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(315deg);
}
.tick:nth-of-type(16)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(17) {
transform: translateY(63px) rotate(324deg);
}
.tick:nth-of-type(18) {
transform: translateY(63px) rotate(333deg);
}
.tick:nth-of-type(19) {
transform: translateY(63px) rotate(342deg);
}
.tick:nth-of-type(20) {
transform: translateY(63px) rotate(351deg);
}
.tick:nth-of-type(21) {
transform: translateY(63px) rotate(360deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(360deg);
}
.tick:nth-of-type(21)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(22) {
transform: translateY(63px) rotate(369deg);
}
.tick:nth-of-type(23) {
transform: translateY(63px) rotate(378deg);
}
.tick:nth-of-type(24) {
transform: translateY(63px) rotate(387deg);
}
.tick:nth-of-type(25) {
transform: translateY(63px) rotate(396deg);
}
.tick:nth-of-type(26) {
transform: translateY(63px) rotate(405deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(405deg);
}
.tick:nth-of-type(26)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(27) {
transform: translateY(63px) rotate(414deg);
}
.tick:nth-of-type(28) {
transform: translateY(63px) rotate(423deg);
}
.tick:nth-of-type(29) {
transform: translateY(63px) rotate(432deg);
}
.tick:nth-of-type(30) {
transform: translateY(63px) rotate(441deg);
}
.tick:nth-of-type(31) {
transform: translateY(63px) rotate(450deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(450deg);
}
.tick:nth-of-type(31)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(32) {
transform: translateY(63px) rotate(459deg);
}
.tick:nth-of-type(33) {
transform: translateY(63px) rotate(468deg);
}
.tick:nth-of-type(34) {
transform: translateY(63px) rotate(477deg);
}
.tick:nth-of-type(35) {
transform: translateY(63px) rotate(486deg);
}
.tick:nth-of-type(36) {
transform: translateY(63px) rotate(495deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(495deg);
}
.tick:nth-of-type(36)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(37) {
transform: translateY(63px) rotate(504deg);
}
.tick:nth-of-type(38) {
transform: translateY(63px) rotate(513deg);
}
.tick:nth-of-type(39) {
transform: translateY(63px) rotate(522deg);
}
.tick:nth-of-type(40) {
transform: translateY(63px) rotate(531deg);
}
.combo {
font-size: 22.5px;
text-align: center;
display: none;
}
.combo span {
background: #ccc;
display: inline-block;
line-height: 30px;
padding: 7.5px;
width: 30px;
height: 30px;
vertical-align: middle;
}
.combo span.found {
background: #ccc;
color: #fff;
}
/* Animation classes */
.unlocked {
animation: moveUp 0.2s linear forwards, moveUp 0.2s 2s linear reverse forwards;
}
.moveLeft {
animation: moveLeft 0.5s 0.4s linear forwards, moveLeft 0.5s 1.2s linear reverse forwards;
}
.moveRight {
animation: moveRight 0.5s 0.4s linear forwards, moveRight 0.5s 1.2s linear reverse forwards;
}
.pivot1 {
animation: pivot1 0.5s 0.4s linear forwards, pivot1 0.5s 1.2s linear reverse forwards;
}
.pivot2 {
animation: pivot2-1 0.25s 0.4s cubic-bezier(0.6, 0.3, 0.45, 1) forwards, pivot2-2 0.25s 0.65s cubic-bezier(0.2, 0, 0.63, 0.5) forwards, pivot2-2 0.25s 1.3s cubic-bezier(0.2, 0, 0.63, 0.5) reverse forwards, pivot2-1 0.25s 1.45s cubic-bezier(0.6, 0.3, 0.45, 1) reverse forwards;
}
#keyFrames moveUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-63px);
}
}
#keyframes moveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(30px);
}
}
#keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(202.5px);
}
}
#keyframes pivot1 {
from {
transform: scale(1, 1);
right: 0;
}
50% {
transform: scale(0.25, 1) rotateY(0);
right: 0;
}
50.01% {
transform: scale(0.25, 1) rotateY(180deg);
right: 33.75px;
}
to {
transform: scale(1, 1) rotateY(180deg);
right: 33.75px;
}
}
#keyframes pivot2-1 {
from {
transform: scale(1, 1);
}
to {
transform: scale(0, 1);
}
}
#keyframes pivot2-2 {
from {
transform: scale(0, 1);
}
to {
transform: scale(1, 1);
}
}
:root{
--text-color: #003cff;
--streak-color: #ff0000;
--font-family: "Gidugu";
}
h1, p, span {
color: transparent;
font-weight: 400;
font-size: 6rem;
}
h1 {
display: block;
height: 50vh;
background: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
p, span {
display: inline-block;
}
p {
padding-left: 1rem;
font-size: 6rem;
text-shadow: 0 0 221px transparent;
-webkit-animation: showText 1s 1.5s 1 forwards ease-out;
animation: showText 1s 1.5s 1 forwards ease-out;
position: relative;
font-family: var(--fontstyle), cursive;
}
p:after {
content: "";
width: 30px;
background: var(--text-color);
height: 30px;
position: absolute;
top: 0px;
left: 200px;
border-radius: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
box-shadow: 0 0 0px 103px var(--text-color);
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: scaleBounce .3s 2s 1 linear forwards;
animation: scaleBounce .3s 2s 1 linear forwards;
}
span {
text-shadow: -48px -203px 150px var(--text-color), 132px -203px 150px var(--text-color);
-webkit-animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
font-family: var(--fontstyle), cursive;
}
span:first-child {
-webkit-animation-delay: -.3s;
animation-delay: -.3s;
}
span:nth-child(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
span:nth-child(3) {
-webkit-animation-delay: .7s;
animation-delay: .7s;
}
h1:after {
content: "";
display: block;
width: 200px;
height: 4px;
position: absolute;
left: 50%;
margin-left: -300px;
margin-top: 60px;
border-radius: 100%;
background: var(--streak-color);
box-shadow: 32px 5px 0 var(--streak-color);
-webkit-animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
#-webkit-keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#-webkit-keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#-webkit-keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#-webkit-keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#-webkit-keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
#keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
HTML
<html >
<head>
<meta charset="UTF-8">
<title>Combination Lock</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Satisfy" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="css/sitelocker.css">
<link rel="stylesheet" href="css/mainsite.css">
</head>
<body>
<div class="sitelocker">
<div class="container">
<div class="lock">
<div class="shackle">
<div class="top">
<div class="inner"></div>
</div>
<div class="left">
<div class="dentL"></div>
<div class="dentR"></div>
</div>
<div class="right"></div>
</div>
<div class="arrow"></div>
</div>
<div class="dial">
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
</div>
<div class="combo"><span class="num1"></span> <span class="num2"></span> <span class="num3"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js'></script>
<script src="js/sitelocker.js"></script>
</div>
<div class="mainsitebody" style="display:none;">
<h1>
<span>MSFT</span><span>.</span>
<p>online</p>
</h1>
</div>
</body>
</html>

How to hide the scroll indicator on scroll?

Dear people of the Internet,
I have this css & html code to add an scroll indicator to my landing page.
My goal is; As soon as you scroll down, the indicator disappears and only appears again after reloading the page.
My jquery seems not to work, any help much appreciated!
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>

Your code is fine, it doesn't work because there isn't any available scroll, so $(this).scrollTop() can't ever be greater than zero.
You can see it working by making the body taller:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
height: 200vh;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>

How to get text to animate to look as if it is going under another layer

For a comparable example, view this site. If you look on the left side, you will see rotated text that loops through different lines of text. This is what I am trying to accomplish. The text in this example starts by the white line and then once it starts moving up, it looks as if it goes under a layer to make it seem like it is going out of place.
How could I modify my code to handle this?
Right now the white line and the text do not appear in line and I cannot figure out how I can make it look like the text is moving under another layer.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr {
visibility: visible;
-webkit-animation-name: dgAgnCurr;
animation-name: dgAgnCurr
}
.digitalAgency .agencyText.next {
visibility: hidden;
-webkit-animation-name: dgAgnNext;
animation-name: dgAgnNext
}
#-webkit-keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#-webkit-keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

Get rid of the CSS animations and use a simple transition. No need to overcomplicate things. You're simply going from translate -100% to 0% to 100% so you don't really need animation keyframes.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
transition:.45s ease-in-out; /* added this */
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
transform: translateY(-100%); /* added this */
}
.digitalAgency .agencyText.curr {
visibility: visible;
transform: translateY(0%); /* added this */
}
.digitalAgency .agencyText.next {
visibility: hidden;
transform: translateY(100%); /* added this */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

Slide in text on banner css animation

I want to translateX text on the banner from left to right. I have taken a reference to animation from this site https://pereiraodell.com/
They are using jQuery/javaScript for animation. The same effect I want to have using CSS.
I am trying to replica same effect using CSS but mine was not as smooth as given in the reference.
In the referenced site, the text animation speed is gradually slowing down and the opacity setting works perfectly. I am not able to produce the same effect in my code. Maybe I am missing some breakpoints in keyframes. fiddle
I want to show this animation on hover so that when the user hovers out, the text should go back to its original place in the animation.
.banner{
width:500px;
height:300px;
background-color:green;
border-radius:4px;
overflow:hidden;
padding-left:20px
}
.content{
width:200px
}
.title{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.description{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.banner:hover .title{
animation: slideInRight 1s;
animation-fill-mode:forwards
}
.banner:hover .description{
animation: slideInRight 1s 80ms;
animation-fill-mode:forwards
}
#keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50%{
opacity: 0.2;
}
80%{
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>

Check Fiddle, Hope this solve your issue :)
Fiddle: http://jsfiddle.net/5vax1uce/68/
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px;
}
.title {
font-size: 20px;
color: #fff;
padding-top: 10px;
opacity: 0;
transform: translateX(-100px);
transition: all .8s linear;
}
.description {
font-size: 20px;
color: #fff;
padding-top: 10px;
opacity: 0;
transform: translateX(-100px);
transition: all .8s linear;
}
.banner:hover .title {
opacity: 1;
transform: translateX(0);
}
.banner:hover .description {
opacity: 1;
transform: translateX(0);
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>

1st answer with animation
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px
}
.title {
transform: translateX(-1000px);
font-size: 20px;
color: #fff;
padding-top: 10px;
animation: slideOutLeft 1s 80ms;
animation-fill-mode: forwards
}
.description {
transform: translateX(-1000px);
font-size: 20px;
color: #fff;
padding-top: 10px;
animation: slideOutLeft 1s 80ms;
animation-fill-mode: forwards;
}
.banner:hover .title {
animation: slideInRight 1s;
animation-fill-mode: forwards
}
.banner:hover .description {
animation: slideInRight 1s 80ms;
animation-fill-mode: forwards
}
#keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 0.2;
}
80% {
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
#keyframes slideOutLeft {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
opacity: 0.8;
}
80% {
opacity: 0.6;
}
100% {
transform: translateX(-100px);
opacity: 0
}
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
2nd answer with transition gives better results
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px
}
.title {
transform: translateX(-105%);
opacity: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
transition: all 1s ease-in;
}
.description {
transform: translateX(-105%);
opacity: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
transition: all 1s ease-in;
}
.banner:hover .title,
.banner:hover .description {
transform: translateX(0);
opacity: 1;
transition: all 1s ease-out;
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>

Edit:
Here is the fix I have been talking about, I have applied the animation on the path .banner .content .title and .banner .content .description. I have edited your fiddle. I have made .content as display:none by default. When the mouseenter event is fired, the .content is changed to display:block and then the animation is applied. I hope it helps. I have updated the link to the fiddle.
$(".banner").mouseenter(function(){
$(".content").css("display","block");
});
.banner{
width:500px;
height:300px;
background-color:green;
border-radius:4px;
overflow:hidden;
padding-left:20px
}
.content{
width:200px;
display:none;
}
.title{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.description{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.banner .content .title{
animation: slideInRight 1s;
animation-fill-mode:forwards;
}
.banner .content .description{
animation: slideInRight 1s;
animation-fill-mode:forwards;
}
#keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50%{
opacity: 0.2;
}
80%{
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
Here is the link to your fiddle.

It was not working until inside the css script I did change the place of the #keyframe slideInRight {}, I put it before calling it then it worked for me.

CSS animation reset transform

I have a CSS clock, the minute hand has the following animation styling:
animation: a36016 3600s normal infinite steps(3600,end);
This allows it to move along as the minutes go by.
When I load the page the minutes hand has a rotation set like this:
transform:rotate(180deg);
Using setInterval I am trying to reSync it. So for example after 10 minutes if I get the rotation for example as 210deg, and then I change it like this:
$('#clock .mm').css( {'transform': 'rotate(210deg)'});
The problem is that it doesn't actually set the degrees to 210, for some reason it adds to whatever amount of degrees the animation has already moved. So it becomes 210deg plus whatever amount it has already moved.
Can someone tell me how I can adjust the animation styling so this doesnt happen, if change the rotation usig javascript to whatever it is, it should set it to that regardless of how many degrees it has already moved.
Thanks
* BELOW IS THE FULL CODE *
PHP
<?php
date_default_timezone_set("Europe/London");
$hour = date("g");
$minutes = date("i");
$seconds = date("s");
if ($hour>=12){
$hour=0;
}
$hourinseconds = ($hour*3600)+($minutes*60)+$seconds;
$minutesinseconds = ($minutes*60)+$seconds;
$hour_degree = ($hourinseconds/43200)*360;
$minutes_hand = ($minutesinseconds/3600)*360;
$seconds_hand = ($seconds/60)*360;
?>
HTML, CSS and jQuery
$(document).ready(function(){
function SyncTime(){
$.getJSON('ajax.php', function(data) {
$('#clock .hh').css( {'transform': 'rotate('+data.hour+'deg)'});
$('#clock .mm').css( {'transform': 'rotate('+data.min+'deg)'});
});
}
setInterval(SyncTime,5000);
});
body {
overflow: hidden;
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
/*** Font for numbers ***/
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.eot');
}
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.woff') format('woff'), url('fonts/wallclock.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'WallClockPS';
src: url('fonts/wallclock.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/*** Clock rules. Pure CSS ***/
#clock {
transition: all 0.5s ease;
}
#a {
width: 100em;
height: 100em;
position: relative;
border-radius: 50em;
background: #eee;
box-shadow: inset 0.5em -0.5em 0 #ccc, inset 1.7em -1.7em 0 #555, inset -0.3em -0.4em 0 #999, inset -0.3em 0.2em 0 #ccc, inset -1em -1em 0 #555, 1em 3em 2em rgba(0, 0, 0, 0.3);
}
#b {
width: 94em;
height: 94em;
top: 3em;
left: 3em;
position: relative;
border-radius: 47em;
background: #fff;
box-shadow: inset 0.4em 0 0 #fff, inset 0 -0.6em 0 #ddd, inset 1.6em -0.8em 0 #222, inset -1.6em 0.8em 0 #222, inset 2em 2em 0 #222, 0.6em -0.3em 0 #999, -1em 1em 0 #777, -1.3em -2em 0 #fff, 1.3em 2em 0 #222, 1.3em 3em 0 #999;
}
#c {
width: 89em;
height: 89em;
top: 2.5em;
left: 2.5em;
position: relative;
border-radius: 44.5em;
background: #f4f5f6;
box-shadow: inset 0.5em 1em 0.5em rgba(0, 0, 0, 0.4), inset 1em 2em 2em rgba(0, 0, 0, 0.3), inset 0 0.5em 3em rgba(0, 0, 0, 0.1), -1.6em 0.8em 0 #444, 1.6em -0.8em 0 #444;
}
#d {
width: 88em;
height: 88em;
top: 0.5em;
left: 0.5em;
position: relative;
border-radius: 44em;
}
#e {
width: 81.8em;
height: 81.8em;
padding-top: 40.9em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
left: 2.9em;
top: 2.9em;
position: absolute;
border: solid 0.4em #777;
border-radius: 40.9em;
}
#ii {
padding-left: 43.4em;
position: absolute;
}
b,
i {
height: 82em;
position: absolute;
border: solid 0 #222;
border-width: 3em 0;
display: block;
}
b {
width: 1.2em;
}
i {
width: 0.2em;
}
b>i,
i>i {
transform: rotate(6deg);
margin-top: -3em;
}
b>b {
transform: rotate(30deg);
margin-top: -3em;
}
b>i {
left: 0.3em;
}
#f,
#g {
font: 12em/1.0em WallClock, sans-serif;
text-align: center;
width: 6.8em;
color: #222;
}
#g>u>u {
letter-spacing: 0.1em;
}
#g>u>u>u {
letter-spacing: 0;
}
u {
display: block;
line-height: 1em;
text-decoration: none;
}
u>u>u>u {
margin: 0.5em -0.55em;
padding: 0 0.05em;
}
u>u>u {
margin: 0.0em -1.75em;
padding: 0 0.7em;
}
u>u {
margin: -0.55em 0;
text-align: right;
padding: 0 1.65em;
}
#f {
margin-top: -3.37em;
}
#g {
margin-top: -6em;
}
#g u>u {
text-align: left;
}
#q {
font: 2.2em/1em Segoe UI, Helvetica, sans-serif;
text-align: center;
margin-top: -11.5em;
color: #555;
}
.ss,
.mm,
.hh {
width: 80em;
height: 80em;
top: 4em;
left: 4em;
position: absolute;
}
.hh {
transform: rotate(-55deg);
}
.mm {
transform: rotate(60deg);
}
.ss {
animation: tick 1s normal infinite steps(25, end);
}
#keyframes tick {
0% {
transform: rotate(0deg);
}
12% {
transform: rotate(6deg);
}
100% {
transform: rotate(6deg);
}
}
.s {
width: 1em;
height: 48em;
top: 6em;
left: 39.5em;
position: relative;
background: #a00;
outline: 1px solid transparent;
animation: a360_10 60s normal infinite steps(60, end);
}
.sr {
width: 3em;
height: 3em;
background: #a00;
margin: -9.5em 0 0 38.4em;
border-radius: 1.5em;
}
#keyframes a360_10 {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
.m {
height: 48em;
left: 38.9em;
width: 2.2em;
position: relative;
background: #222;
border: 0 0 32em 0;
animation: a36016 3600s normal infinite steps(3600, end);
outline: 1px solid transparent;
}
#keyframes a36016 {
0% {
transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
100% {
transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
.mr {
width: 5em;
height: 5em;
background: #222;
margin: -10.5em 0 0 37.4em;
border-radius: 2.5em;
}
.h {
width: 3em;
height: 34em;
left: 38.5em;
position: relative;
background: #222;
margin-top: 13em;
outline: 1px solid transparent;
animation: a36010 43200s normal infinite steps(43200, end);
}
#sh {
width: 80em;
height: 80em;
top: 2em;
left: 1em;
position: absolute;
}
#sh .s,
#sh .m,
#sh .h,
#sh .mr {
background: #ddd;
xbox-shadow: 0 0 0.5em #ddd, 0 0 0.25em #ddd;
}
#k {
width: 88em;
height: 88em;
position: absolute;
border-radius: 44em;
box-shadow: inset 4.5em 9em 0.5em rgba(250, 252, 253, 0.2);
}
/* Vendor CSS prefixes */
#css3prefixed:checked~#clock {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#css3prefixed:checked~#clock b>i,
#css3prefixed:checked~#clock i>i,
#css3fixed:checked~#clock b>i,
#css3fixed:checked~#clock i>i {
-webkit-transform: rotate(6deg);
}
#css3prefixed:checked~#clock b>b,
#css3fixed:checked~#clock b>b {
-webkit-transform: rotate(30deg);
}
#css3prefixed:checked~#clock .hh,
#css3fixed:checked~#clock .hh {
-webkit-transform: rotate(-55deg);
}
#css3prefixed:checked~#clock .mm,
#css3fixed:checked~#clock .mm {
-webkit-transform: rotate(60deg);
}
#css3prefixed:checked~#clock .ss,
#css3fixed:checked~#clock .ss {
-webkit-animation: tick 1s normal infinite steps(25, end);
}
#-webkit-keyframes tick {
0% {
-webkit-transform: rotate(0deg);
}
12% {
-webkit-transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(6deg);
}
}
#css3prefixed:checked~#clock .s,
#css3fixed:checked~#clock .s {
-webkit-animation: a360_10 60s normal infinite steps(60, end);
}
#-webkit-keyframes a360_10 {
0% {
-webkit-transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
-webkit-transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
#css3prefixed:checked~#clock .m,
#css3fixed:checked~#clock .m {
-webkit-animation: a36016 3600s normal infinite steps(3600, end);
}
#-webkit-keyframes a36016 {
0% {
-webkit-transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
50% {
-webkit-transform: translate(0, 16em) rotate(180deg) translate(0, -16em);
}
100% {
-webkit-transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
#css3prefixed:checked~#clock .h,
#css3fixed:checked~#clock .hh {
-webkit-animation: a36010 43200s normal infinite steps(43200, end);
}
/* Fixes */
#css3fixed:checked~#clock {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
}
.fixed {
display: none;
}
/* Following will fix problems with cascaded transformations
are critical in Safari, Mobile Safari, Opera,
non-critical in Chrome and Firefox */
</style><!--[if !IE]>--><style>#css3fixed:checked~#clock .fixed {
display: block;
}
#css3fixed:checked~#clock .pure {
display: none;
}
</style><!-- <![endif]--><style>#css3fixed:checked~#clock b:nth-child(2) {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
#css3fixed:checked~#clock b:nth-child(3) {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
#css3fixed:checked~#clock b:nth-child(4) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#css3fixed:checked~#clock b:nth-child(5) {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
#css3fixed:checked~#clock b:nth-child(6) {
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
#css3fixed:checked~#clock i:nth-child(2) {
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
}
#css3fixed:checked~#clock i:nth-child(3) {
transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
#css3fixed:checked~#clock i:nth-child(4) {
transform: rotate(24deg);
-webkit-transform: rotate(24deg);
}
/* IE10 fix */
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
#css3fixed:checked~#clock i,
#css3fixed:checked~#clock b {
border-left: solid 0px #fff;
border-right: solid 0px #fff;
}
}
/* Opera rotation fix */
#css3fixed:checked~#clock .s {
animation: a360_10of 60s normal infinite steps(60, end);
}
#keyframes a360_10of {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(0deg) translate(0, -3.2em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(360deg) translate(0, -3.2em)
}
}
/* Chrome/Windows antialiasing bug. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#css3fixed:checked~#clock #f,
#css3fixed:checked~#clock #g {
font: 12em/1em WallClockPS, sans-serif;
}
#css3fixed:checked~#clock #g {
-webkit-transform: translate(0, -0.05em);
}
}
/* Clock size selection */
#clock {
font-size: 5px;
}
#size25percent:checked~#clock {
font-size: 25%
}
#size250px:checked~#clock {
font-size: 2.5px
}
#size500px:checked~#clock {
font-size: 5px
}
#size10em:checked~#clock {
font-size: 0.1em
}
#size25percent:checked~#clock {
font-size: 25%
}
/* Controls */
input {
width: 1em;
position: relative;
valign: top;
}
input[type=checkbox] {
left: 0.2em;
}
input+label {
padding: 0.2em 0.4em 0.3em 1.4em;
margin-left: -1.4em;
border-radius: 0.3em;
transition: background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
}
input:checked+label {
background: #ABD8F2;
}
input,
label {
line-height: 1.8em;
}
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#clock {
position: absolute;
right: 55%;
top: 50px;
display: block;
}
#clock {
margin-top: 4em;
}
body #clock .hh {
transform: rotate(<?php echo $hour_degree;
?>deg);
}
#clock .mm {
transform: rotate(<?php echo $minutes_hand;
?>deg);
-webkit-transform: rotate(<?php echo $minutes_hand;
?>deg);
-ms-transform: rotate(<?php echo $minutes_hand;
?>deg);
}
#clock .ss {
animation: tick 1s normal infinite steps(25, end);
-webkit-animation: tick 1s normal infinite steps(25, end);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div style="width:700px;;position:absolute;left:748px;top:84px;">Content</div>
<div id="clock" style="margin-top:84px;">
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="sh">
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
</div>
</div>
<div id="ii">
<div class="pure">
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i></b>
</b>
</b>
</b>
</b>
</b>
</div>
<!-- this is need only to show
bugs-free variant in many browsers -->
<div class="fixed">
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
</div>
<!-- till here -->
</div>
<div id="e">
<div id="f">
<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
</div>
<div id="g">
<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
</div>
<div id="q"> quartz</div>
</div>
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
<div class="sr"></div>
</div>
<div id="k"></div>
</div>
</div>
</div>
</div>
<div id="css3icon"/>

This removes the value of the CSS property entirely, will that help?
// Reset transform
$('#clock .mm').css({'transform': ''});

This issue is not related to changing transform by jQuery or initial value of transform by CSS.
if you have following example:
<!doctype html>
<html lang="en">
<head>
<title></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.a{width: 100px; height:100px; margin: 100px auto; background: #000}
.b{height: 100px; width: 100px;transform:rotate(10deg); background: red;}
</style>
</head>
<body>
<div class="a">
<div class="b">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script language="javascript">
$('.b').css( {'transform': 'rotate(20deg)'});
</script>
</body>
</html>
You see that it change just 10 degree and even you change $('.b').css( {'transform': 'rotate(10deg)'}); it does not change.
the problem is related to something else or even a logical error.
According to codes that you sent if you change your jQuery to this:
$(document).ready(function(){
function SyncTime(){
$('#clock .hh').css( {'transform': 'rotate(50deg)'});
$('#clock .mm').css( {'transform': 'rotate(50deg)'});
}
setInterval(SyncTime,5000);
});
After 5 seconds it will redirect to a location and never change its position. the calculation time that pass from ajax.php has issue