Develop Reference

STOP the <a and href tags pops up to another page and instead play within the main page

I'm kind of new to the programming world and the professor requires me to stop the popping and play the music in the background of the main page when he clicks on the word "PLAY MUSIC". I don't know how to do that, although I have tried a lot. Is it even possible to do that ?
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div><a class="sig" href="https://audio.code.org/win1.mp3" target="_blank">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

You can follow these steps:
Add an <audio> tag to your HTML with a src attribute containing the URI for the audio you want to play. This tag is the one which will load the content from https://audio.code.org/win1.mp3.
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
Remove the href attribute from your .sig anchor (<a>) element, since it will not take the user to the audio resource webpage anymore. Instead, it will work like a button which will be responsible for playing the audio when clicked.
Having an <a> element working as a <button> element isn't good for accessibility, unless you make this behavior explicit by means of role="button". This attribute will indicate that your <a> will work as a button. Yes, you can also replace that tag with a <button> tag as long as you are willing to modify your CSS for maintaining aesthetics.
<a class="sig" role="button">PLAY MUSIC</a>
In your JavaScript code, attach a click event to .sig, telling it to play the audio you want when it's clicked.
$('.sig').on('click', () => $('#myAudio').get(0).play());
Try it below.
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

Custom Attribute to a modal

what i want to do that when i click a button it opens specific modal like when i click button1 it opens modal1 and so on , how can i achieve this :
HTML :
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-effect" class="button">One</div>
<div id="modal-effect" class="button">Two</div>
css :
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
#keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
Jquery:
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
EDIT : Here is the full working modal i want to specify which button and modal is clicked to make it open .
what i want to do i want to add something like modal-numbers attribute when i click on a button it opens specific modal popup.

In your CSS, use class instead of ids unless absolutely necessary. Ids are for identifying individual objects. If you want a group of objects to have a similar behavior then you use CSS classes.
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#container-'+buttonId).removeClass('out').addClass('modal-effect');
$('body').addClass('modal-active');
})
$('.modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
.modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
.modal-effect .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
.modal-effect .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
#keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="container-modal-one" class="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="container-modal-two" class="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-one" class="button">One</div>
<div id="modal-two" class="button">Two</div>

Dropdown fixed position and formatting not working

I have a responsive menu bar that has a dropdown list which is named three. However, I cannot make its format same with the other title and it moves once it is being hovered. Is there any way that the format title of three be the same as one, two, four and five? And when it is being hovered, is it possible that its position be in a fixed place? Please help. I already tried inline but it doesn't work either. And kindly run the snippet in full screen.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel = "icon" href = "https://cdn.iconscout.com/icon/free/png-256/data-fiveence-46-1170621.png" type = "image/x-icon">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
#media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
#media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
#media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
#keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
p {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
p:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="one()">one</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">two</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<p class="strip__title" style="margin-left:-15px">three</p>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="sdct()">two</a>
<a class="dropdown-item" onclick="four()">four</a>
</div>
</li>
</ul>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">four</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="">five</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>

.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; /* add a width */
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: absolute; /*position is changes (relative --> absolute)*/
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

Smooth scrolling not working when it should?

So I've been designing a website for my new market garden company. The eCommerce backend is Lemonstand. I simply want to have the arrow button at the bottom of the main image scroll to the anchor (rather than jump). You can view the website here.
I found this code on this website in response to another question:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#scroll").click(function() {
scrollToAnchor('start');
});
The HTML is:
<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>
<section class="container"><a name="start"></a>
I'm loading jquery 3.3.1 from Google's CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've also tried numerous js scripts. All of them work in theory but don't seem to work on my site. What am I missing?

A small Demo , might help.
// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$(".bck-top").addClass("show");
} else {
$(".bck-top").removeClass("show");
}
});
$(".bck-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
// Smooth Scroll
$(".nxt-pg").click(function(event){
$("html, body").animate({
scrollTop: $( this ).offset().top
}, 800);
event.preventDefault();
});
.for-height {
background: crimson;
height: 150vh;
}
.bck-top {
position: fixed;
right: -75px;
bottom: 35px;
background: #0e4d67;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
cursor: pointer;
z-index: 555;
}
.bck-top.show {
right: 35px;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #797bed;
opacity: 1;
transition-property: right, transform, border-radius;
transition-duration: .6s, .6s, .5s;
transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
transition-delay: 0s, 0s, .5s;
box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
border-radius: 50%;
transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
width: 40px;
height: 29px;
margin: 0 auto;
cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
display: block;
width: 40px;
height: 4px;
border-radius: 35px;
background: #fff;
animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
animation-play-state: paused;
}
.nxt-pg span {
position: relative;
margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
content: '';
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
.nxt-pg span:before {
top: 12px;
width: 30px;
animation-delay: .15s;
}
.nxt-pg span:after {
top: 24px;
width: 20px;
animation-delay: .2s;
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #009688;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #787bed;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
<a class="nxt-pg">
<span class="br-top"></span>
Click Me
</a>
</div>
<button type="button" class="bck-top">up</button>

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