Develop Reference

Section snapping whilst scrolling

I'm trying to implement page/section snapping as you scroll page to page, for some reason the class="outer" seems to be interfering with the first page title, button and the nav bar? The nav bar was functional before I added the classes "outer" and "page" the title and button also remained on the first page and did not pass through to the other pages. anyone know what this problem is? have a feeling it's something simple
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
#media (min-height: 30em) {
.section__content > * {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay),
transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content > * {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
box-sizing:border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center ;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y:auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start; height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one" >
<div class="page">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

Two things,
Because btn-centering is not wrapped into any position: relative element, so it behaves like position: fixed, It was working for you previously because .outer didn't have overflow, overflow also affects positions
another thing is you have added overflow-y: auto to .outer so it has scroll now and body doesn't, but in jquery, you are trying to scroll the body.
I have added relative to .page element of first .section
I have added z-index: 1 to .nav because the relative element is affecting .nav
I have changed $('html,body').animate to $('.outer').animate
After doing all the above changes the page was scrolling to wrong sections, I found that Jquery will change the offset top when the page scroll is changed, So I also changed target.offset().top to target[0].offsetTop (target[0].offsetTop is supported in all browsers including IE)
html,
body {
margin: 0;
height: 100%;
width: 100%;
padding: 0;
}
.relative {
position: relative;
}
#media (min-height: 30em) {
.section__content>* {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content>* {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height: 100%;
width: 100%;
box-sizing: border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start;
height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
z-index: 1;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('.outer').animate({
scrollTop: target[0].offsetTop
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one">
<div class="page relative">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
</div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

How to slide door down on page load, then slide door up on button click

When the webpage loads in, the door goes down, and when the button is pressed, the door should go back up.
The fan and the background should first be seen, then the door should slide down, then clicking on the door raises it.
Is there a way for this to be improved?
code https://jsfiddle.net/jt9vpeyx/
.video-one {
top: -101%;
transition: all 10s ease-in 0s;
transition-delay: 1s;
}
.video-one.slide {
top: 0%;
}
.curtain.slide .video-one {
transition-delay: 3s;
transform: translateY(calc(-100% - 1px));
}
let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
videoOne.classList.add("slide");
})
How the code works is, on page load the wall comes down, then on button click the wall goes up.
let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
videoOne.classList.add("slide");
})
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"0dgNc5S8cLI",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.curtain::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: repeating-linear-gradient( calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient( calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
}
.video-one::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url("https://via.placeholder.com/264x264");
background-position: center;
background-size: 41.25% 73.33%;
background-repeat: no-repeat;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
}
.fence>div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: green;
}
.fence>div:nth-child(1) {
top: 10%;
}
.fence>div:nth-child(2) {
top: 20%;
}
.fence>div:nth-child(3) {
top: 30%;
}
.fence>div:nth-child(4) {
top: 40%;
}
.fence>div:nth-child(5) {
top: 50%;
}
.fence>div:nth-child(6) {
top: 60%;
}
.fence>div:nth-child(7) {
top: 70%;
}
.fence>div:nth-child(8) {
top: 80%;
}
.fence>div:nth-child(9) {
top: 90%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
.slide .fan svg {
animation: fan-spin linear;
animation-duration: 12s;
animation-iteration-count: 1;
animation-delay: 3s;
}
#keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
display: block;
animation: iframe 6s ease forwards;
animation-delay: 6s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
iframe {
user-select: none;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
border-color: blue;
animation: fadeInPlay 2s ease-in 2s forwards;
animation-delay: 10s;
opacity: 0;
cursor: default;
pointer-events:none;
}
#keyframes fadeInPlay {
0% {
opacity: 0;
}
99.9% {
opacity: 1;
pointer-events:none;
}
100% {
opacity: 1;
cursor: pointer;
pointer-events:initial;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
border-left-color: blue;
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: -101%;
transition: all 10s ease-in 0s;
transition-delay: 1s;
}
.video-one.slide {
top: 0%;
}
.curtain.slide .video-one {
transition-delay: 3s;
transform: translateY(calc(-100% - 1px));
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap hide">
<div class="video video-frame" data-id=""></div>
</div>
<div class="video-one"></div>
</div>
<a href="https://www.google.com/">
<div class="exit"></div>
</a>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

code: https://jsfiddle.net/rn5p9fb4/
What was used:
.video-one {
top: 0;
transform: translateY(calc(-100% - 1px));
animation: curtainDown 10s ease-in 1s forwards;
}
#keyframes curtainDown {
to {
transform: translateY(0%);
}
}
.curtain.slide .video-one {
transform: translateY(0%);
animation: curtainUp 8s ease-in 3s forwards;
}
#keyframes curtainUp {
to {
transform: translateY(calc(-100% - 1px));
}
}
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
//curtain.classList.add("slide2");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
// videoOne.classList.add("slide");
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"0dgNc5S8cLI",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.curtain::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
}
.video-one::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url("https://via.placeholder.com/264x264");
background-position: center;
background-size: 41.25% 73.33%;
background-repeat: no-repeat;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
}
.fence>div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: green;
}
.fence>div:nth-child(1) {
top: 10%;
}
.fence>div:nth-child(2) {
top: 20%;
}
.fence>div:nth-child(3) {
top: 30%;
}
.fence>div:nth-child(4) {
top: 40%;
}
.fence>div:nth-child(5) {
top: 50%;
}
.fence>div:nth-child(6) {
top: 60%;
}
.fence>div:nth-child(7) {
top: 70%;
}
.fence>div:nth-child(8) {
top: 80%;
}
.fence>div:nth-child(9) {
top: 90%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
.slide .fan svg {
animation: fan-spin linear;
animation-duration: 12s;
animation-iteration-count: 1;
animation-delay: 3s;
}
#keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
display: block;
animation: iframe 6s ease forwards;
animation-delay: 6s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
iframe {
user-select: none;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
border-color: blue;
animation: fadeInPlay 2s ease-in 2s forwards;
animation-delay: 10s;
opacity: 0;
cursor: default;
pointer-events: none;
}
#keyframes fadeInPlay {
0% {
opacity: 0;
}
99.9% {
opacity: 1;
pointer-events: none;
}
100% {
opacity: 1;
cursor: pointer;
pointer-events: initial;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
border-left-color: blue;
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: 0;
transform: translateY(calc(-100% - 1px));
animation: curtainDown 10s ease-in 1s forwards;
}
#keyframes curtainDown {
to {
transform: translateY(0%);
}
}
.curtain.slide .video-one {
transform: translateY(0%);
animation: curtainUp 8s ease-in 3s forwards;
}
#keyframes curtainUp {
to {
transform: translateY(calc(-100% - 1px));
}
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap hide">
<div class="video video-frame" data-id=""></div>
</div>
<div class="video-one"></div>
</div>
<a href="https://www.google.com/">
<div class="exit"></div>
</a>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

Transitions work perfectly if you add a frame before it start.
.video-one {
top: -101%;
}
.video-one.closed {
top: 0%;
}
let v1 = document.querySelector('.video-one')
requestAnimationFrame(() => {
// should be a frame while it's not closed for transition to work
videoOne.classList.toggle('closed', true)
})
document.querySelector(".play").onclick = () => {
// for testing: toggle both directions, you may click it many times
videoOne.classList.toggle('closed', /* false */ )
// for usage: toggle false or classList.remove
// v1.classList.toggle('closed', false)
}
let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
// should be a frame while it's not closed for transition to work
videoOne.classList.toggle('closed', true)
})
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
videoOne.classList.toggle('closed', false )
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.curtain::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
position: absolute;
height: 100%;
width: 100%;
top: 0;
transition: all 8s ease-in 0s;
transition-delay: 1s;
background: repeating-linear-gradient( calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient( calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
x-animation: slidedown 8s forwards;
}
#keyframes slidedown {
to {
transform: translateY(calc(+100% + 1px));
}
}
.curtain.slide .video-one {
transform: translateY(calc(-100% - 1px));
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
background-size: 10px 10px;
filter: drop-shadow(0 0 5px #000);
clip-path: circle(25% at center);
}
.fence>div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: green;
}
.fence>div:nth-child(1) {
top: 10%;
}
.fence>div:nth-child(2) {
top: 20%;
}
.fence>div:nth-child(3) {
top: 30%;
}
.fence>div:nth-child(4) {
top: 40%;
}
.fence>div:nth-child(5) {
top: 50%;
}
.fence>div:nth-child(6) {
top: 60%;
}
.fence>div:nth-child(7) {
top: 70%;
}
.fence>div:nth-child(8) {
top: 80%;
}
.fence>div:nth-child(9) {
top: 90%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
.slide .fan svg {
animation: fan-spin linear;
animation-duration: 12s;
animation-iteration-count: 1;
animation-delay: 3s;
}
#keyframes fan-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
display: block;
animation: iframe 10s ease forwards;
animation-delay: 8.5s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
iframe {
user-select: none;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: #f91f6e;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
#keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: #f91f6e;
opacity: 1;
}
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: -101%;
/* for testing: fast */
transition: all 1s ease-in 0s;
transition-delay: 0.5s;
}
.video-one.closed {
top: 0%;
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap hide">
<div class="video video-frame" data-id=""></div>
</div>
<div class="video-one"></div>
</div>
<a href="https://www.google.com/">
<div class="exit"></div>
</a>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

Javascript/jQuery FlipClock destroy/clearInterval

I'm trying to use this FlipClock plugin.
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I wonder if do We have possible to destroy/clearInterval var clock; just using clearInterval(clock) ? Tried and no luck.
I already open the manual documentation, but seems I'm not so understand how to destroy that.

Per the documentation you linked, the [clock instance has .stop() and reset() methods...
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
function stopClock() {
clock.stop();
}
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<button onclick="stopClock()">stop</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a variable when creating the interval method:
Here clock variable is not a timer set with setInterval so you can't use clearInterval.
Events callback should help you to do your thing .

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

Display an image wrapped around a sphere with CSS/Javascript

I am aware that this is possible with three.js but it seems that three.js maxes a mesh sphere and the image gets a bit distorted. I'd also rather just use CSS if possible.
Is this something that can be done with CSS transforms? Ideally I'd like to animate it going from a flat image to a sphere so something that can easily be animated with CSS transitions would be great.

I found a nice example of how to do this with CSS on codepen: http://codepen.io/donovanh/pen/GBIiv. It doesn't actually wrap the image in 3d but it looks nice enough for my purposes.
Here is the relevant html/css:
<section class="stage">
<figure class="ball"><span class="shadow"></span></figure>
</section>
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
-webkit-transform-style: preserve-3d;
background: url('https://alxgroup.net/gto-range-builder/images/treeSS.png') repeat-x;
background-size: auto 100%;
-webkit-animation: move-map 30s infinite linear;
-moz-animation: move-map 30s infinite linear;
-o-animation: move-map 30s infinite linear;
-ms-animation: move-map 30s infinite linear;
animation: move-map 30s infinite linear;
}
.ball:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
z-index: 2;
}
.ball:after {
content: "";
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-filter: blur(0);
opacity: 0.3;
background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
body {
width: 300px;
margin: 20px auto;
background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
background-repeat: no-repeat;
}
.stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
#-moz-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-webkit-keyframes move-map {
0% {
background-position: 0 0; }
100% {
background-position: -849px 0; }
}
#-o-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-ms-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }