Keyframe animate absolute positioned buttons - javascript

I have one large button at z-index: 1, covering up two smaller buttons at z-indices 0.9 and 0.8, respectively. On click of the first button, they should slide out. This only occurs when they do not have the "position: absolute;" property, however this causes them to be placed lower on the screen, rather than beneath the element that's meant to be covering them.
Link to CodePen
https://codepen.io/Gladdstone/pen/aYObGy
function setConversion(obj) {
if($(obj).hasClass("buttonpress")) {
$(obj).removeClass("buttonpress");
// add "in" animation classes
$("#celsius").addClass("celsius-in");
$("#fahrenheit").addClass("fahrenheit-in");
// remove "out" animation classes
if($("#celsius").hasClass("celsius-out")) {
$("#celsius").removeClass("celsius-out");
$("#fahrenheit").removeClass("fahrenheit-out");
}
} else {
$(obj).addClass("buttonpress");
// add "out" animation classes
$("#celsius").addClass("celsius-out");
$("#fahrenheit").addClass("fahrenheit-out");
// remove "in" animation classes
if($("#celsius").hasClass("celsius-in")) {
$("#celsius").removeClass("celsius-in");
$("#fahrenheit").removeClass("fahrenheit-in");
}
}
}
.celsius-in {
animation-name: celsius-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.celsius-out {
animation-name: celsius-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-in {
animation-name: fahrenheit-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-out {
animation-name: fahrenheit-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.overmap {
position: absolute;
z-index: 1;
}
.temp-small {
position: absolute;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
margin-left: 75%;
height: 10vw;
width: 10vw;
transition: box-shadow 0.3s ease-in-out;
}
#celsius {
z-index: 0.8;
}
#fahrenheit {
z-index: 0.9;
}
#temp {
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 2rem;
text-align: center;
vertical-align: middle;
padding-right: 10%;
margin-left: 75%;
height: 20vw;
width: 20vw;
transition: box-shadow 0.3s ease-in-out;
}
#tempbutton {
bottom: 10%;
width: 100%;
}
#keyframes celsius-out {
from { margin-left: 75%; }
to { margin-left: 30%; }
}
#keyframes celsius-in {
from { margin-left: 30%; }
to { margin-left: 75%; }
}
#keyframes fahrenheit-out {
from { margin-left: 75%; }
to { margin-left: 50%; }
}
#keyframes fahrenheit-in {
from { margin-left: 50%; }
to { margin-left: 75%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
<button id="temp" type="button" onclick="setConversion(this);">78°</button>
<button id="fahrenheit" type="button" class="temp-small">°F</button>
<button id="celsius" type="button" class="temp-small">°C</button>
</div>

Is this you want ??
function setConversion(obj) {
if($(obj).hasClass("buttonpress")) {
$(obj).removeClass("buttonpress");
// add "in" animation classes
$("#celsius").addClass("celsius-in");
$("#fahrenheit").addClass("fahrenheit-in");
// remove "out" animation classes
if($("#celsius").hasClass("celsius-out")) {
$("#celsius").removeClass("celsius-out");
$("#fahrenheit").removeClass("fahrenheit-out");
}
} else {
$(obj).addClass("buttonpress");
// add "out" animation classes
$("#celsius").addClass("celsius-out");
$("#fahrenheit").addClass("fahrenheit-out");
// remove "in" animation classes
if($("#celsius").hasClass("celsius-in")) {
$("#celsius").removeClass("celsius-in");
$("#fahrenheit").removeClass("fahrenheit-in");
}
}
}
#charset "utf-8";
/* CSS Document */
.celsius-in {
animation-name: celsius-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.celsius-out {
animation-name: celsius-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-in {
animation-name: fahrenheit-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-out {
animation-name: fahrenheit-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.overmap {
position: absolute;
z-index: 1;
}
.temp-small {
position: absolute;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
height: 10vw;
width: 10vw;
transition: box-shadow 0.3s ease-in-out;
right: 60px;
top: 45px;
}
#temp {
position: relative;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 2rem;
text-align: center;
vertical-align: middle;
padding-right: 10%;
margin-left: 75%;
height: 20vw;
width: 20vw;
transition: box-shadow 0.3s ease-in-out;
z-index: 5;
}
#tempbutton {
bottom: 10%;
width: 100%;
position: relative;
}
#keyframes celsius-out {
from { right: 40px; }
to { right: 50%; }
}
#keyframes celsius-in {
from { right: 50%; }
to { right: 40px; }
}
#keyframes fahrenheit-out {
from { right: 40px; }
to { right: 70%; }
}
#keyframes fahrenheit-in {
from { right: 70%; }
to {right: 40px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
<button id="temp" type="button" onclick="setConversion(this);">78°</button>
<button id="fahrenheit" type="button" class="temp-small">°F</button>
<button id="celsius" type="button" class="temp-small">°C</button>
</div>

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>

Cannot display source code from JSFiddle to blogger

I have a problem with my source code. I hope you read well and understand and do not immediately act ignorant of my question.
I very often come across people who are smart but don't like to understand other people's questions.
I've edited a quiz via JSFiddle. With the help of this forum, It works fine on JSFiddle.
But when I tried this source code on blogger, it didn't work very well. The question doesn't arise. Someone said that something was wrong with the CSS. I edited the CSS, but it didn't work. Even when I delete the entire CSS, the questions still don't appear while the rest of the section appears.
I will show the difference with the following image.
The first image is an image that works well in JSField. The second image is the appearance of blogger with full CSS. The third image is the appearance of blogger without CSS. The CSS I mean is the CSS I use on JSField.
I have changed the contents several times, even deleted some parts. But in the end it didn't work and I returned the CSS.
One thing is for sure, even though I tried the question and answer choices from the quizzes it didn't appear on blogger.
I have asked this many times, I hope to find answers to my questions in this forum.
here I give my file link in JSFiddle
and here's the CSS for my problem. I apologize for showing all the CSS because I don't know which part is the problem in blogger
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.quizArea{
width: 95%;
margin: auto;
padding:10px;
position: relative;
text-align: center;
}
.mc_quiz{
color: #3a5336;
margin-bottom: 0px;
}
.multipleChoiceQues{
width:90%;
margin: auto;
padding: 10px;
}
.quizBox
{
width:90%;
margin: auto;
}
.question{
text-align: center;
font-size: 0.8em;
}
.buttonArea
{
text-align: right;
height: 4.5em;
}
button {
height: 4em;
width:130px;
padding: 1.5em auto;
margin: 1em auto;
background-color:#f1f2ec;
border: none;
border-radius: 3px;
color: #7aa4a9;
text-transform: uppercase;
letter-spacing: 0.5em;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
#next:hover,
#submit:hover,
.viewanswer:hover,
.viewchart:hover,
.backBtn:hover,
.replay:hover {
letter-spacing: 0.8em;
}
.viewanswer,
.viewchart,
.replay{
width: 30%;
}
.backBtn{
width:100px;
height: 2em;
font-size: 0.8em;
margin-left: 70%;
}
#next:active,
#submit:active,
.viewanswer:active,
.viewchart:active,
.backBtn:active,
.replay:active {
letter-spacing: 0.3em;
}
.resultArea{
display: none;
width:70%;
margin: auto;
padding: 10px;
}
.chartBox{
width: 60%;
margin:auto;
}
.resultPage1{
text-align: center;
}
.resultBox h1{
}
.briefchart
{
text-align:center;
}
.resultBtns{
width: 60%;
margin: auto;
text-align:center;
}
.resultPage2,
.resultPage3
{
display: none;
text-align: center;
}
.allAnswerBox{
width: 100%;
margin: 0;
position: relative;
}
._resultboard{
position: relative;
display:inline-block;
width: 40%;
padding: 2%;
height: 190px;
vertical-align: top;
border-bottom: 0.6px solid rgba(255,255,255,0.2);
text-align: left;
margin-bottom: 4px;
}
._resultboard:nth-child(even){
margin-left: 5px;
border-left: 0.6px solid rgba(255,255,255,0.2);
}
._resultboard:nth-last-child(2),
._resultboard:nth-last-child(1){
border-bottom: 0px;
}
._header{
font-weight: bold;
margin-bottom: 8px;
height: 90px;
}
._yourans,
._correct{
margin-bottom: 8px;
position: relative;
line-height: 2;
padding: 5px;
}
._correct{
background: #968089 ;
}
.h-correct{
background: #968089;
}
.h-correct:after,
._correct:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00c";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #2dceb1;
}
.h-incorrect{
background: #ab4e6b ;
}
.h-incorrect:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00d";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #ff383e;
}
.resultPage3 h1,
.resultPage1 h1,
.resultPage2 h1{
text-align: center;
padding-bottom: 10px;
border-bottom: 1.3px solid rgba(21, 63, 101,0.9);
color: #3a5336;
}
.my-progress {
position: relative;
display: block;
margin: 3rem auto 0rem;
width: 100%;
max-width: 950px;
}
progress {
display: block;
position: relative;
top: -0.5px;
left: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f1f2ec ;
width: 100%;
height: 2.5px;
background: none;
-webkit-transition: 1s;
transition: 1s;
will-change: contents;
}
progress::-webkit-progress-bar {
background-color: #c72828;
}
progress::-webkit-progress-value {
background-color:#153f65;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.my-progress-indicator {
position: absolute;
top: -6px;
left: 0;
display: inline-block;
width: 5px;
height: 5px;
background: #7aa4a9;
border: 3px solid #f1f2ec;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transition-delay: .3s;
transition-delay: .3s;
will-change: transform;
}
.my-progress-indicator.progress_1 {
left: 0;
}
.my-progress-indicator.progress_2 {
left: 9%;
}
.my-progress-indicator.progress_3 {
left: 18%;
}
.my-progress-indicator.progress_4{
left: 27%;
}
.my-progress-indicator.progress_5 {
left: 36%;
}
.my-progress-indicator.progress_6 {
left: 45%;
}
.my-progress-indicator.progress_7 {
left: 54%;
}
.my-progress-indicator.progress_8 {
left: 63%;
}
.my-progress-indicator.progress_9 {
left: 72%;
}
.my-progress-indicator.progress_10 {
left: 81%;
}
.my-progress-indicator.progress_11 {
left: 90%;
}
.my-progress-indicator.progress_12 {
left: 100%;
}
.my-progress-indicator.active {
-webkit-animation: bounce .5s forwards;
animation: bounce .5s forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s;
border-color: #153f65 ;
}
.animation-container {
position: relative;
width: 100%;
-webkit-transition: .3s;
transition: .3s;
will-change: padding;
overflow: hidden;
}
.form-step {
position: absolute;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
will-change: transform, opacity;
}
.form-step.leaving {
-webkit-animation: left-and-out .5s forwards;
animation: left-and-out .5s forwards;
}
.form-step.waiting {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.form-step.coming {
-webkit-animation: right-and-in .5s forwards;
animation: right-and-in .5s forwards;
}
#-webkit-keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#-webkit-keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
display: none;
}
ul{
list-style-type: none;
width: 220px;
margin: auto;
text-align: left;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height:30px;
}
label{
color: #c72828;
}
label:before {
content: "";
width: 15px;
height: 15px;
background : #c72828;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff ;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked ~ .bullet {
position:absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
background : #fff;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #c72828 ;
opacity:0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked ~ .bullet .line.zero{
animation-name:drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.one{
animation-name:drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.two{
animation-name:drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.three{
animation-name:drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.four{
animation-name:drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.five{
animation-name:drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.six{
animation-name:drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.seven{
animation-name:drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0%{
opacity: 0;
transform: scale(10);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
and if you want to see it in blogger view, click here

how to finish animation effect after returning from new tab?

function navigation(id) {
switch (id) {
case 'btn4':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
case 'btn5':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
}
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color: #122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border: 0.2rem solid #64ef65;
border-radius: 35px;
background: linear-gradient(to bottom, #53D853 0%, #0F860F 100%);
}
input[type="checkbox"]:checked+label::before {
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked+label::after,
input:checked+label span {
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1" onclick="navigation(this.id);">
<input type="checkbox" id="defaultBtn">
<label for="defaultBtn"><span><strong>Access</strong></span>
</label>
</div>
i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue. i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue.
With simple trick : use <a> tag
onclick="setTimeout('animRedirect()', 250);" give in checkbox onclick
I add a tag before checkbox and add url
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
------------------Add here check box---------------------------
</a>
I fixed this problem in codepen : https://codepen.io/Rayeesac/pen/ExKKPZe
function animRedirect(){
document.getElementById("reDirect").click();
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color:#122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border:0.2rem solid #64ef65;
border-radius: 35px;
background:linear-gradient(to bottom,#53D853 0%,#0F860F 100%);
}
input[type="checkbox"]:checked + label::before{
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked + label::after,
input:checked + label span{
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#reDirect{
outline: none;
width: 100%;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1">
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
<input type="checkbox" id="defaultBtn" onclick="setTimeout('animRedirect()', 250)">
<label for="defaultBtn">
<span><strong>Access</strong></span>
</label>
</a>
</div>

How to do reverse animation in CSS?

So for the following code, I have a circular notification that animates, opening up left and displaying information and a profile image. I would like to be able to reverse the animation back by having the circle go forward covering up the info and fading out (which I already have inputed). However, I'm not sure how to implement this. I've tried a couple of ways like switching the animation around but it doesn't seem to work. Any suggestions?
You can click the "CLOSE ME" button to close the notification and the "OPEN ME" to open it as well.
$(document).ready(function() {
$(".open").click(function(e) {
$(".pgn-wrapper").fadeIn(250);
});
$(".close").click(function(e) {
$(".pgn-wrapper").fadeOut(500);
});
});
/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
border-radius: 300px;
animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
-webkit-animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
height: 50px;
overflow: hidden;
padding: 6px 55px 6px 6px;
-webkit-transform: translateZ(0);
position: relative;
}
.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
float: right;
}
.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
float: left;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div {
border-radius: 50%;
overflow: hidden;
width: 48px;
height: 48px;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
width: 100%;
height: 100%;
}
.pgn-circle .alert > div > div.pgn-message > div {
opacity: 0;
height: 47px;
padding-left: 9px;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
.pgn-circle .alert > div > div.pgn-message > div p:only-child {
padding: 12px 0;
}
.pgn-circle .alert .close {
margin-top: -12px;
position: absolute;
right: 18px;
top: 50%;
opacity: 0;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
}
.pgn-circle .alert p {
margin-bottom: 0;
}
.pgn-circle .alert > div {
display: table;
height: 100%;
}
.pgn-circle .alert > div > div {
display: table-cell;
vertical-align: middle;
}
#keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#-webkit-keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.close:target {
animation: resizeCircle2 1s all;
animation-direction: alternate;
}
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
/* Headings
------------------------------------
*/
p {
display: block;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 22px;
margin: 0px 0px 10px 0px;
font-style: normal;
white-space: normal;
}
.bold {
font-weight: bold !important;
}
/* Alert
------------------------------------
*/
.alert {
background-image: none;
box-shadow: none;
text-shadow: none;
padding: 9px 19px 9px 15px;
border-radius: 3px;
font-size: 13px;
border-width: 0;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.alert-danger, .alert-error {
background-color: #c42827;
color: white;
border-color: #933432;
}
.alert-danger .close, .alert-error .close {
background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/
.pgn-wrapper[data-position='top'] {
top: 0;
left: 0;
right: 0;
}
.pgn {
position: relative;
margin: 10px;
}
.pgn .alert {
margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="pgn-wrapper" data-position="top-right">
<div class="pgn push-on-sidebar-open pgn-circle">
<div class="alert alert-danger">
<div>
<div class="pgn-thumbnail">
<div>
<img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="pgn-message">
<div>
<p class="bold" style="color:white">John Doe</p>
<p>Logging out in <b>60</b> second(s).</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Well, you've got a ton of code and I didn't parse through all of it, but I can say that when you have an animation like this:
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
You are indicating where the width should start and end so to reverse that, you'd want to either ensure that this animation is tied to a temporary state, like a hover with a selector like this:
element:hover {
animation:resizeCircle 1s all;
}
Then, the animation would only apply when the element is being hovered and when it isn't the element will animate back to its original state.
Or, you could set up a separate animation that specifies the reverse property values:
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
and apply that to a "trigger" selector, such as:
element:target {
animation:resizeCircle2 1s all;
}
Which would (in this case) apply the reverse animation when the element is the target of a click.
Here's an example:
<div class="expandable"></div>
div.expandable {
background-color: green;
width: 30px;
height: 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
div.expandable:hover {
width: 300px;
}
You can give that a run here: https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview

Categories