Animation with Popups Box

Animation with Popups Box - javascript

At the starting of 'zoomIn' animation the background: rgba(0, 0, 0, 0.5); comes along with it but what I am trying is to popup box to have zoomIn animation and the background: rgba(0, 0, 0, 0.5); should already be there.
And I am trying to implement smooth animation of 'backOutTop' after clicking Submit button in the popup box but:
1) The animation is not smooth, it happens very suddenly.
2) After the animation the popup box doesn't seem to hide even after I have set visibility: hidden;
If there's any other way to do that. Please do share. Thank You.
$(document).ready(() => {
setTimeout(() => {
$(".popUp").css('visibility', 'visible')
}, 500); //Automatically Pops up after 0.5 sec.
});
document.querySelector('.btn-name').addEventListener('click', () => {
document.querySelector('#popUpid').classList.remove('popUp');
document.querySelector('#popUpid').classList.add('popUpClose');
});
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
visibility: hidden;
animation: zoomIn;
animation-duration: 3s;
}
.popUpClose {
visibility: hidden;
animation: backOutUp;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
border: 3px solid black;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="popUp" id="popUpid">
<div class="popUpBox">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
</body>

as per the question explanation, these are the little changes you need to do in your code.
$(document).ready(function() {
setTimeout(() => {
$(".popUp").css('visibility', 'visible')
}, 500); //Automatically Pops up after 0.5 sec.
$('.btn-name').click(function() {
$('#popUpid').addClass('popUpClose');
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
visibility: hidden;
animation: zoomIn;
animation-duration: 3s;
opacity: 1;
transition: opacity 1s;
}
.popUpClose {
opacity: 0;
animation: backOutUp;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
border: 3px solid black;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp" id="popUpid">
<div class="popUpBox">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>
for your still background and animation only on popUP.
$(document).ready(function() {
setTimeout(() => {
$(".popUpBox").addClass('show');
}, 500); //Automatically Pops up after 0.5 sec.
$('.btn-name').click(function() {
$('#popUpid').addClass('popUpClose');
setTimeout(() => {
$(".popUp").css('opacity','0');
}, 1800);
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popUp {
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 101;
position: absolute;
}
.popUpClose {
opacity: 0;
animation: backOutUpCustom;
animation-duration: 3s;
}
.popUpBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0,0);
width: 200px;
height: 150px;
border: 3px solid black;
transition: all 3s;
background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}
.popUpBox.show {
transform: translate(-50%, -50%) scale(1,1);
}
.btn-name {
margin-top: 10px;
margin-left: 10px;
width: 100px;
font-size: 15px;
cursor: pointer;
}
#keyframes backOutUpCustom {
0% {
-webkit-transform: scale(1);
transform: translate(-50%, -50%) scale(1,1);
opacity: 1
}
20% {
-webkit-transform: translate(-50%, 0) scale(0.7,0.7);
transform: translate(-50%, 0) scale(0.7,0.7);
opacity: .7
}
to {
-webkit-transform: translate(-50%, -700px) scale(0.7,0.7);
transform: translate(-50%, -700px) scale(0.7,0.7);
opacity: .7
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp">
<div class="popUpBox" id="popUpid">
<button class="btn-name">Submit</button>
</div>
</section>
<section class="wrapper">
<h1>
Content
</h1>
</section>

Related

HTML, Border Blocking Problem on Welcome Screen

The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends, How can I prevent the border from appearing when the welcome screen appears?
That means I want to see a border on the only main page. How can fix this on my code? I couldn't block the border during the welcome screen. I also added a picture of the desired situation. You can see it below. I am waiting for your help.

First define an id to body element, then write document.getelementbyID("definedID").style.border="solid 50px"; in your function(bodyOnLoad()). Therefore you have a animated border that scaling 0px to 50px on body.
You can use the code below: (in chrome, it will work more accurately than the snippet)
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
.all {
display:block;
border-style: none;
border-width: 0 px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
.all {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
</style>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
setTimeout(() => { const box = document.getElementById('animatedImg'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2000);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2000);
document.getElementById('innerbody').style.border="solid 70px";
});
});
}
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>
<body id="innerbody" class="all">
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
<body>
</body>
<script type="text/javascript">
</script>
</html>

What you need to do is insert this line in your css border: none !important;
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
border:none !important;
}

Try Setting the border style for body to none in the css file.

Html welcoming screen animation switching problem

The Code:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 39%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 7%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: #6699ff;
}
25% {
border-color: #ff6600;
}
50% {
border-color: #6699ff;
}
75% {
border-color: #ff6600;
}
100% {
border-color: #6699ff;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
# background-color: orange;
color: white;
font: 18px Arial, sans-serif;
background-image: url('https://c.tenor.com/YR9WPlpD1zEAAAAd/cloud.gif');
background-size: cover;
transform: rotateY(180deg);
}
//////////////////////////
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Ariel, Helvetica, sans-serif;
background-color: #A3EBB1 ;
color: white;
line-height: 1.6;
text-align: center;
}
.container-welcome{
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase{
height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation: heading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
#keyframes heading{
0% {top: -50px;}
100% {top: 200px;}
}
#visual2 {
position: relative;
animation-name: visual;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes visua2l{
0% {left: -1000px;}
100% {left: 0px;}
}
#visual {
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {transform: rotate(45deg);}
}
.homepage {
display = 'none';
}
//////////////////////////
</style>
<script>
setTimeout(() => { const box = document.getElementById('showcase'); box.style.display = 'none';}, 2500);
setTimeout(() => { const box = document.getElementById('visual'); box.style.display = 'none';}, 2500);
setTimeout(() => { const box2 = document.getElementById('homepage'); box2.style.display = 'block';}, 2500);
</script>
<body>
<head>
<title>Dynamic Web Page</title>
</head>
<header id="showcase">
<h1>Uygulamaya Hoşgeldiniz</h1>
</header>
<div id="visual" class="container-welcome">
<img src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</div>
<div class="flip-card" id="homepage" style= "display:none;">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b></b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>tasci.murat06#gmail.com</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends,I have 2 questions. Firstly,How can I add a blink animation at the same angle after your smiley face turns a certain angle? In my code there is no blinking smiley feature.
Finally, how do I make the page border not visible on the welcoming page? so mean I don't want the border to appear on the welcoming screen. I have added Example images for this situation

I think this will help you. Add animation to your image and wait for finish animation(with delay function) then change the image with js.
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
function bodyOnload() {
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(45deg)';
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/black/wink-xxl.png";
/* if you don't want to rotate base delete this delay block*/
delay(900).then(() => {
document.getElementById('animatedImg').src = "https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png";
document.getElementById('animatedImg').style.WebkitTransitionDuration = '1s';
document.getElementById('animatedImg').style.webkitTransform = 'rotate(0)';
});
});
}
body {
background-color: #A3EBB1;
color: white;
text-align: center;
}
.container-welcome {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
<body onload="bodyOnload()">
<div class="container-welcome">
<img id="animatedImg" src="https://www.iconsdb.com/icons/preview/white/emoticon-30-xxl.png">
</div>
</body>

Trying to stop CSS animation at full

Goal: finished product as picture attached with only the bubbles rising inside the glass.
Hey, I am working on this CSS /JS code and I need the final version of filled glass only with bubbles and foam on top (ignoring all the delays and fillings in animations). I tried but somehow unsuccessful, any suggestions where to edit the code? thanks
$(document).ready(function() {
$('.pour')
.delay(2000)
.animate({
height: '360px'
}, 1500)
.delay(1600)
.slideUp(500);
$('#liquid')
.delay(3400)
.animate({
height: '170px'
}, 2500);
$('.beer-foam')
.delay(3400)
.animate({
bottom: '200px'
}, 2500);
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
.drunk {
-webkit-animation-name: drunk;
-moz-animation-name: drunk;
animation-name: drunk;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>

Filling the glass instantly, but bubbles moving
To instantly fill the glass, you can remove the delay:
$(document).ready(function() {
/*Look here*/
$('.pour')
.css({
height: '360px'
})
.delay(0)
.slideUp(500);
$('#liquid')
.css({
height: '170px'
});
$('.beer-foam')
.css({
bottom: '200px'
});
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
tran
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
Pausing the bubbles
To pause the bubbles, you can use the animation-play-state: paused; property. This particular way would pause your bubbles after 5.7 seconds:
$(document).ready(function() {
/*Look here*/
setTimeout( () => {
$('.bubble').css("animation-play-state", "paused");
}, 5700)
$('.pour')
.delay(2000)
.animate({
height: '360px'
}, 1500)
.delay(1600)
.slideUp(500);
$('#liquid')
.delay(3400)
.animate({
height: '170px'
}, 2500);
$('.beer-foam')
.delay(3400)
.animate({
bottom: '200px'
}, 2500);
});
body { background-color: #0065bd }
h2 {
margin: 0 auto;
width: 400px;
font-size: 36px;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
color: whiteSmoke;
}
#container {
height: 370px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -20px;
width: 248px;
}
#container div { position: absolute; }
.pour {
position: absolute;
left: 45%;
width: 20px;
height: 0px;
background-color: #0065bd;
border-radius: 10px
}
#beaker {
border: 10px solid #FFF;
border-top: 0;
border-radius: 0 0 30px 30px;
height: 200px;
left: 14px;
bottom: 0;
width: 200px;
}
#beaker:before,
#beaker:after {
border: 00px solid #FFF;
border-bottom: 0;
border-radius: 30px 30px 0 0;
content: '';
height: 30px;
position: absolute;
top: -40px;
width: 30px;
}
#beaker:before { left: -50px; }
#beaker:after { right: -50px; }
#liquid {
background-color: #0065bd;
border: 10px solid #0065bd;
border-radius: 0 0 20px 20px;
bottom: 0;
height: 0px;
overflow: hidden;
width: 180px;
}
#liquid:after {
background-color: rgba(255, 255, 255, 0.25);
bottom: -10px;
content: '';
height: 200px;
left: -40px;
position: absolute;
transform: rotate(30deg);
-webkit-transform: rotate(15deg);
width: 110px;
}
#liquid .bubble {
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
.bubble1 {
left: 10px;
-webkit-animation-delay: 1000ms;
-webkit-animation-duration: 1000ms;
}
.bubble2 {
left: 50px;
-webkit-animation-delay: 700ms;
-webkit-animation-duration: 1100ms;
}
.bubble3 {
left: 100px;
-webkit-animation-delay: 1200ms;
-webkit-animation-duration: 1300ms;
}
.bubble4 {
left: 130px;
-webkit-animation-delay: 1100ms;
-webkit-animation-duration: 700ms;
}
.bubble5 {
left: 170px;
-webkit-animation-delay: 1300ms;
-webkit-animation-duration: 800ms;
}
/* Foam */
.beer-foam {
position: absolute;
bottom: 10px;
}
.foam-1, .foam-2, .foam-3, .foam-4,
.foam-5, .foam-6, .foam-7 {
float: left;
position: absolute;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 30px;
background-color: #fefefe;
}
.foam-1 {
top: -30px;
left: -10px;
}
.foam-2 {
top: -35px;
left: 20px;
}
.foam-3 {
top: -25px;
left: 50px;
}
.foam-4 {
top: -35px;
left: 80px;
}
.foam-5 {
top: -30px;
left: 110px;
}
.foam-6 {
top: -20px;
left: 140px;
}
.foam-7 {
top: -30px;
left: 160px;
}
/* Drunk Text */
#-moz-keyframes drunk {
0% {
-moz-transform: rotate(0);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
20%, 60% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
40% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
80% {
-moz-transform: rotate(60deg) translateY(0); opacity: 1;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform: translateY(700px);
opacity: 0;
}
}
#keyframes drunk {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
opacity: 1; transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
tran
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="pour"></div>
<div id="beaker">
<div class="beer-foam">
<div class="foam-1"></div>
<div class="foam-2"></div>
<div class="foam-3"></div>
<div class="foam-4"></div>
<div class="foam-5"></div>
<div class="foam-6"></div>
<div class="foam-7"></div>
</div>
<div id="liquid">
<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>
<div class="bubble bubble4"></div>
<div class="bubble bubble5"></div>
</div>
</div>
</div>
<h2 class="animated drunk">Please Wait! While you are entered in Game</h2>
If you setthe timeout to 5700, you'll end up with something like this, which is pretty close to your image.
Stopping the bubbles (previous solution)
You could also fiddle with the iteration count and visibility of your bubbles, to kill them after some time, maybe like so:
#liquid .bubble {
visibility: hidden; /*Look here*/
-webkit-animation-name: bubble;
-webkit-animation-iteration-count: 3; /*Look here*/
-webkit-animation-timing-function: linear;
background-color: rgba(255, 255, 255, 0.2);
bottom: 0;
border-radius: 10px;
height: 20px;
width: 20px;
}
#-webkit-keyframes bubble {
0% { visibility: visible; /*Look here*/
bottom: 0; }
50% {
background-color: rgba(255, 255, 255, 0.2);
bottom: 80px;
}
100% {
background-color: rgba(255, 255, 255, 0);
bottom: 160px;
}
}
The numbers depend on the exact effect you'll want, but this would be the way I'd do it. This particular set would send some bubbles and then end the bubbling.

Half circle animation start on button click

I'm trying to get my circle loader running. But didn't found how to get the animation running when clicking the Try it button.
Any ideas?
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>
Here the code: https://jsfiddle.net/pzc41skn/

Here is how you can achieve an animation on clicking of the button:
function myFunction() {
$('.liElem').remove();
$(".chart-skills").html('<div class="liElem" id="eins"></div>');
}
body {
font: normal 16px/1.5 'Roboto', sans-serif;
padding: 130px 0 0 0;
background: #f1f1f1;
}
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.chart-skills *,
.chart-skills::before {
box-sizing: border-box;
}
/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
position: relative;
width: 350px;
height: 175px;
overflow: hidden;
}
.chart-skills::before,
.chart-skills::after {
position: absolute;
}
.chart-skills::before {
content: '';
width: inherit;
height: inherit;
border: 45px solid rgba(211, 211, 211, .3);
border-bottom: none;
border-top-left-radius: 175px;
border-top-right-radius: 175px;
}
.chart-skills::after {
content: '';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: bold;
color: cadetblue;
}
.chart-skills .liElem {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
border: 45px solid;
border-top: none;
border-bottom-left-radius: 175px;
border-bottom-right-radius: 175px;
transform-origin: 50% 0;
transform-style: preserve-3d;
backface-visibility: hidden;
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: linear;
}
.chart-skills #eins {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .4s;
}
.chart-skills #zwei {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .8s;
}
#keyframes rotate-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
/**
* 32% => 57.6deg
* 57.6 + 21.6 => 79.2deg
*/
}
}
#bottom {
transform: scale(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>

Grey out background while page loading

On my page I've got an animated image which runs when the page is busy loading. I've managed to get it to show when the page is busy and stop when the page is not busy. I'm struggling to get the page to grey out while this progress image runs... I've read about a div overlay, but it's not working. How do I do this? I'm new to javascript
This is what I've done:
In my asp.net I've got the following:
<div class="loading" align="center">
<div class="main">
<div class="small1">
<div class="small ball smallball1"></div>
<div class="small ball smallball2"></div>
<div class="small ball smallball3"></div>
<div class="small ball smallball4"></div>
</div>
<div class="small2">
<div class="small ball smallball5"></div>
<div class="small ball smallball6"></div>
<div class="small ball smallball7"></div>
<div class="small ball smallball8"></div>
</div>
<div class="bigcon">
<div class="big ball"></div>
</div>
</div>
</div>
My javascript is as follows:
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var loading = $(".loading");
loading.show();
$('#overlay').css({
'display': 'block',
opacity: 0.7,
'width': $(document).width(),
'height': $(document).height()
});
$('body').css({'overflow':'hidden'});
$('#loading').css({ 'display': 'block' }).click(function () {
$(this).css('display', 'none');
$('#screen').css('display', 'none')
});
}, 200);
$('#main').dialog({ modal: true });
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
And my css looks like this:
body {
padding: 0px;
height:100%;
background-color:#EBEBEB;
filter:alpha(opacity=70);
opacity:0.7;
background-color: #002031;
}
.main {
background-color:#EBEBEB;
filter:alpha(opacity=70);
opacity:0.7;
}
.small2 {
position: absolute;
height: 100px;
width: 100px;
background-color: transparent;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}
.small1 {
position: absolute;
height: 100px;
width: 100px;
top: 50vh;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(45deg);
background-color: transparent;
}
.bigcon {
position: absolute;
height: 95px;
width: 95px;
top: 50vh;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: transparent;
animation: bigcon 2s infinite linear;
animation-delay: 0.25s;
}
.ball {
border-radius: 50%;
position: absolute;
}
.small {
width: 25px;
height: 25px;
animation: small 2s infinite ease;
box-shadow: 0px 2px rgba(0,0,0,0.3);
background-color: #46b9ff;
}
.small:nth-child(1) {
top: 0%;
left: 0%;
}
.small:nth-child(2) {
top: 0%;
right: 0%;
}
.small:nth-child(3) {
right: 0%;
bottom: 0%;
}
.small:nth-child(4) {
bottom: 0%;
left: 0%;
}
.big {
width: 20px;
height: 20px;
border-radius: 15px;
box-shadow:0px 0px 10px #54f7f8, 0px 0px 20px #54f7f8, 0px 0px 30px #54f7f8, 0px 0px 50px #54f7f8, 0px 0px 60px #54f7f8 ;
z-index: 1;
background-color: #54f7f8;
animation: bigball 1s infinite linear;
}
.smallball1{
animation-delay: -1.75s;
}
.smallball6{
animation-delay: -1.5s;
}
.smallball2{
animation-delay: -1.25s;
}
.smallball7{
animation-delay: -1s;
}
.smallball3{
animation-delay: -0.75s;
}
.smallball8{
animation-delay: -0.5s;
}
.smallball4{
animation-delay: -0.25s;
}
.smallball5{
animation-delay: -0s;
}
#keyframes bigcon {
0% {
transform-origin: center;
transform: translate(-50%, -50%) rotate(45deg);
}
100% {
transform-origin: center;
transform: translate(-50%, -50%) rotate(405deg);
}
}
#keyframes small {
0% {
transform: scale(1);
background-color: #46b9ff;
}
10% {
transform: scale(1.3);
background-color: #54f7f8;
}
15% {
transform: scale(1);
}
25%{
transform: scale(1);
background-color: #46b9ff;
}
100%{
transform: scale(1);
background-color: #46b9ff;
}
}
#loading
{
font-family: Arial;
font-size: 10pt;
border: 0px ;
display: none;
background-color: White;
z-index: 999;
}
What am I doing wrong? Any help will be greatly appreciated

Try this:
CSS
.main:before{
position: absolute;
content:"";
width: 100%;
background: #EBEBEB;
height: 100%;
left:0;
z-index:-1;
}
DEMO HERE

We Keep Coding

JavaScript is the programming language of the Web.

Animation with Popups Box - javascript

Related

HTML, Border Blocking Problem on Welcome Screen

Html welcoming screen animation switching problem

Trying to stop CSS animation at full

Half circle animation start on button click

Grey out background while page loading

Categories

Resources