I'm trying to turn my menu into an X shape with animations. Here's a video of what it currently looks like.
Video
I want to make it more smooth and actually make the cross symmetrical.
I have create a code snippet with all the relevant code below.
const NAV_BTN = document.querySelector('.navmenu');
const NL_1 = document.querySelector('.l1');
const NL_2 = document.querySelector('.l2');
const NL_3 = document.querySelector('.l3');
NAV_BTN.addEventListener('click', () => {
navToClose();
});
const navToClose = () => {
NL_1.style.animation = '0.5s l1Close forwards';
NL_2.style.animation = '0.5s l2Close forwards';
NL_3.style.animation = '0.5s l3Close forwards';
};
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.5s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s;
}
.l3 {
width: 20px;
transition: all 0.5s;
margin-left: auto;
}
.navmenu:hover>.l1,
.navmenu:hover>.l3 {
width: 40px;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
/* ANIMATIONS */
#keyframes l1Close{
0%{
transform: rotate(0deg);
margin: 0;
}
100%{
transform: translate(0,0) rotate(-45deg);
width: 40px;
}
}
#keyframes l2Close{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes l3Close{
0%{
transform: rotate(0deg);
}
100%{
transform: translate(0,0) rotate(45deg);
width: 40px;
}
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>
I would appreciate any help, and will reply if you have any questions.
Thanks.
The following code should be close enough to the solution you are aiming for. The transition can be modified according to your needs and the seconds must be adapted accordingly.
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.8s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s linear;
}
.l2 {
width: 40px;
transition: all 0.3s linear;
}
.l3 {
width: 20px;
transition: all 0.5s linear;
margin-left: auto;
}
.navmenu:hover>.l1 {
width: 40px;
position: relative;
top: 7px;
transform: rotate(-45deg);
}
.navmenu:hover>.l3 {
width: 40px;
position: relative;
top: -7px;
transform: rotate(45deg);
}
.navmenu:hover>.l2 {
height: 1.5px;
opacity:0;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>
Related
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.
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>
Kindly ask for your advice making working a javascript navigation bar.
It should be supposed to:
open a page preview clicking on the link (I think to have achieve that, even though with a too long code block);
open the selected page with the second click (the first is just for the preview -- i tried with a container.classList.toggle("active"); inside each element.onclick function but didn't work)
give you the chance to open the page clicking directly on the preview (I don't have a clue how to do so)
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
document.getElementById("home-btn").onclick = function() {
document.getElementById("home").style.display = "block";
document.getElementById("services").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("services-btn").onclick = function() {
document.getElementById("services").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("portfolio-btn").onclick = function() {
document.getElementById("portfolio").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("services").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("about-btn").onclick = function() {
document.getElementById("about").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("services").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("contact").style.display = "none";
};
document.getElementById("contact-btn").onclick = function() {
document.getElementById("contact").style.display = "block";
document.getElementById("home").style.display = "none";
document.getElementById("services").style.display = "none";
document.getElementById("portfolio").style.display = "none";
document.getElementById("about").style.display = "none";
};
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
width: 100%;
background-color: #485461;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
overflow-x: hidden;
transform-style: preserve-3d;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
height: 5rem;
}
.menu {
max-width: 72rem;
height: inherit;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
color: #fff;
}
.logo {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 2px;
line-height: 4rem;
}
.logo span {
font-weight: 300;
}
.hamburger-menu {
height: 4rem;
width: 3rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.bar {
width: 1.9rem;
height: 1.5px;
border-radius: 2px;
background-color: #eee;
transition: 0.5s;
position: relative;
}
.bar::before,
.bar::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #eee;
transition: 0.5s;
}
.bar::before {
transform: translateY(-9px);
}
.bar::after {
transform: translateY(9px);
}
.main {
position: relative;
width: 100%;
left: 0;
z-index: 5;
overflow: hidden;
transform-origin: left;
transform-style: preserve-3d;
transition: 0.5s;
}
header {
min-height: 100vh;
width: 100%;
background: url("../milky_way.jpg") no-repeat top center / cover;
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(43, 51, 59, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.inner {
max-width: 50rem;
text-align: center;
color: #fff;
padding: 0 2rem;
}
.title {
font-size: 2.72rem;
margin-bottom: 1.25rem
}
.description {
font-family: "Open Sans";
margin-bottom: 3rem;
}
.btn {
font-size: 0.75rem;
margin: 1rem;
padding: 0.6rem 1.2rem;
background-color: #1179e7;
border: 2px solid #1179e7;
border-radius: 25px;
color: #fff;
background-color: transparent;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
}
.btn:hover {
animation: pulse 1s;
box-shadow: 0 0 0 2em transparent;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 #1179e7;
}
}
.container.active .bar {
transform: rotate(360deg);
background-color: transparent;
}
.container.active .bar::before {
transform: translateY(0) rotate(45deg);
}
.container.active .bar::after {
transform: translateY(0) rotate(-45deg);
}
.container.active .main {
animation: main-animation 0.5 ease;
cursor: pointer;
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
#keyframes main-animation {
from{
transform: translate(0);
}
to{
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
}
.links {
position: absolute;
width: 30%;
right: 0;
top: 0;
height: 100vh;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
}
.links a {
text-decoration: none;
color: #bbb;
padding: 0.7rem 0;
display: inline-block;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
opacity: 0;
transform: translateY(10px);
animation: hide 0.5s forwards ease;
}
.links a:hover {
color: #fff;
}
.container.active .links a {
animation: appear 0.5s forwards ease var(--i);
}
#keyframes appear {
from{
opacity: 0;
transform: translateY(10px);
}
to{
opacity: 1;
transform: translateY(0px);
}
}
#keyframes hide {
from{
opacity: 1;
transform: translateY(0px);
}
to{
opacity: 0;
transform: translateY(10px);
}
}
.shadow {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform-style: preserve-3d;
transform-origin: left;
transition: 0.5s;
background-color: white;
}
.shadow.one {
z-index: -1;
opacity: 0.15;
}
.shadow.two {
z-index: -2;
opacity: 0.1;
}
.container.active .shadow.one {
animation: shadow-one 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
#keyframes shadow-one {
0%{
transform: translate(0);
}
5%{
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
100%{
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
}
.container.active .shadow.two {
animation: shadow-two 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
#keyframes shadow-two {
0%{
transform: translate(0);
}
5%{
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
100%{
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
}
.container.active .main:hover + .shadow.one {
transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);
}
.container.active .main:hover {
transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);
}
#services,
#portfolio,
#about,
#contact {
display: none;
}
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="bar">
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="main" id="home">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">home</h2>
</div>
</div>
</header>
</div>
<div class="main" id="services">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">services</h2>
</div>
</div>
</header>
</div>
<div class="main" id="portfolio">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">portfolio</h2>
</div>
</div>
</header>
</div>
<div class="main" id="about">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">about</h2>
</div>
</div>
</header>
</div>
<div class="main" id="contact">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">contact</h2>
</div>
</div>
</header>
</div>
<div class="shadow one">
</div>
<div class="shadow two">
</div>
</div>
<div class="links">
<ul>
<li>
Home
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
I have a ticket as you see in the picture below:
So the ticket includes the Bin component which is the bin icon you see and it has an animation when you click the cap of the bin goes up and comes back again.
So I wanted to delete this ticket with delay because I want to show the animation that I mentioned.Here is my delete component:
<template>
<div id="delete-button" #click.prevent="removeProductFromCart(item.id)">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="lid"></div>
<div id="box">
<div id="box-inner">
<div id="bin-lines"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import cartHelper from "../helpers/cartHelper";
export default {
props: {
item: Object,
},
data() {
return {
loading: false,
};
},
methods: {
removeProductFromCart(id) {
this.loading = true;
setTimeout(() => {
cartHelper.removeFromCart(id, (response) => {
this.$store.dispatch('removeProductFromCart', {
cart: response.data,
})
this.loading = false
});
}, 1000)
}
};
</script>
and the css for the bin and animation:
#delete-button {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
#checkbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
z-index: 3;
}
#bin-icon {
position: absolute;
width: 26px;
}
#lid {
position: relative;
width: 30px;
height: 4px;
left: -2px;
border-radius: 4px;
}
#lid:before {
content: '';
position: absolute;
top: -4px;
right: 0;
left: 0;
width: 10px;
height: 3px;
margin: 0 auto;
border-radius: 10px 10px 0 0;
}
#box {
position: relative;
height: 37px;
margin-top: 1px;
border-radius: 0 0 8px 8px;
}
#box-inner {
position: relative;
top: 2px;
width: 20px;
height: 32px;
margin: 0 auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
#bin-lines {
position: relative;
top: 7px;
margin: 0 auto;
}
#bin-lines, #bin-lines:before, #bin-lines:after {
width: 2px;
height: 20px;
border-radius: 4px;
}
#bin-lines:before, #bin-lines:after {
content: '';
position: absolute;
}
#bin-lines:before {
left: -8px;
}
#bin-lines:after {
left: 8px;
}
#layer {
position: absolute;
right: -20px;
bottom: -20px;
width: 0;
height: 0;
background-color: var(--link-text-color-hover);
border-radius: 50%;
transition: 0.25s ease all;
z-index: 1;
}
#lid, #lid:before,
#box, #bin-lines,
#bin-lines:before,
#bin-lines:after {
background-color: var(--button-color);
transition: 0.2s ease background-color;
}
#checkbox:checked ~ #bin-icon #lid,
#checkbox:checked ~ #bin-icon #lid:before,
#checkbox:checked ~ #bin-icon #box {
background-color: var(--link-text-color-hover);
}
#checkbox:checked ~ #bin-icon #bin-lines,
#checkbox:checked ~ #bin-icon #bin-lines:before,
#checkbox:checked ~ #bin-icon #bin-lines:after {
background-color: var(--link-text-color-hover);
}
#checkbox:checked + #bin-icon #box {
animation: shake 0.2s ease 0.1s;
}
#checkbox:checked + #bin-icon #lid {
animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
}
#checkbox:checked ~ #layer {
width: 226px;
height: 226px;
}
#keyframes shake {
0%{ transform: rotateZ(3deg); }
25%{ transform: rotateZ(0);}
75%{ transform: rotateZ(-3deg); }
100%{ transform: rotateZ(0); }
}
#keyframes lift-up {
0%{ top:0; }
50%{ top:-35px;}
100%{ top:0; }
}
#keyframes shake_u {
0%{ transform: rotateZ(0); }
25%{ transform:rotateZ(-15deg); }
50%{ transform:rotateZ(0deg); }
75%{ transform:rotateZ(15deg); }
100%{ transform:rotateZ(0); }
}
#keyframes shake_l {
0%{ transform:rotateZ(0); }
80%{ transform:rotateZ(3deg); }
90%{ transform:rotateZ(-3deg); }
100%{ transform:rotateZ(0); }
}
So overall, when I click the bin icon I want the ticket to be deleted but after a bit of delay because I want to show the animation of the bin (the cap goes up and down). But like this, it only deletes it (without animation), just with delay. So I wonder how can I solve this problem. I am working with Vue but it might have js or css solution.
I think it's because your checkbox never gets "checked".
You can either add that inside your method or you can just wrap that block with a label.
<template>
<label for="checkbox" id="delete-button" #click="removeProductFromCart(item.id)">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="lid"></div>
<div id="box">
<div id="box-inner">
<div id="bin-lines"></div>
</div>
</div>
</div>
</label>
</template>
There are cards, when you click on the checkmark, the card flies sideways, when you click on the cross, the card turns over to the correct answer. On this side there is a button, when you click on which the card flies to the side, as well as when you click on the checkmark. I have a problem with the last point. How to make it so that when you click on the button with the class next on the back of the card, the active card flies sideways? https://jsfiddle.net/kyen9gsw/
'use strict';
var quizcardContainer = document.querySelector('.quizcard');
var allCards = document.querySelectorAll('.flip-card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');
var next = document.getElementById('next');
function initCards(card, index) {
var newCards = document.querySelectorAll('.flip-card:not(.removed)');
newCards.forEach(function (card, index) {
card.style.zIndex = allCards.length - index;
card.style.opacity = (10 - index) / 10;
});
quizcardContainer.classList.add('loaded');
}
initCards();
function createButtonListener(love) {
return function (event) {
var cards = document.querySelectorAll('.flip-card:not(.removed)');
var moveOutWidth = document.body.clientWidth * 0.3;
if (!cards.length) return false;
var card = cards[0];
card.classList.add('removed');
if (love) {
card.style.transform = 'translate(' + moveOutWidth + 'px, -900px) rotate(0deg)';
} else if (nope){
card.classList.toggle('do-flip');
document.querySelectorAll('next').onclick = function() {
card.style.transform = 'translate(' + moveOutWidth + 'px, 900px)';
};
}
initCards();
event.preventDefault();
};
}
var nopeListener = createButtonListener(false);
var loveListener = createButtonListener(true);
nope.addEventListener('click', nopeListener);
love.addEventListener('click', loveListener);
.quizcard {
width: 100vw;
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
opacity: 0;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.loaded.quizcard {
opacity: 1;
}
.quizcard--status {
position: absolute;
top: 50%;
margin-top: -30px;
z-index: 2;
width: 100%;
text-align: center;
pointer-events: none;
}
.quizcard--status i {
font-size: 100px;
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: absolute;
width: 100px;
margin-left: -50px;
}
.quizcard_love .fa-check {
opacity: 0.7;
-webkit-transform: scale(1);
transform: scale(1);
}
.quizcard_nope .fa-remove {
opacity: 0.7;
-webkit-transform: scale(1);
transform: scale(1);
}
.quizcard--cards {
-webkit-box-flex: 1;
flex-grow: 1;
padding-top: 40px;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
z-index: 1;
}
.quizcard--buttons {
-webkit-box-flex: 0;
flex: 0 0 100px;
text-align: center;
padding-top: 20px;
}
.quizcard--buttons button {
border-radius: 50%;
line-height: 60px;
width: 60px;
border: 0;
background: #FFFFFF;
display: inline-block;
margin: 0 8px;
background: #000;
}
.quizcard--buttons button:focus {
outline: 0;
}
.quizcard--buttons i {
font-size: 32px;
vertical-align: middle;
}
.fa-check {
color: #089404;
}
.fa-remove {
color: red;
}
.flip-card {
display: inline-block;
width: 90vw;
max-width: 400px;
height: 70vh;
text-align: center;
margin: 50px auto;
position: absolute;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip-card .flip-card-front, .flip-card-back{
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
-webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
-moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
}
.flip-card .flip-card-front {
background: lightgreen;
border:1px solid grey;
}
.flip-card .flip-card-back {
background: lightblue;
border: 1px solid grey;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
height: 100%;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="quizcard">
<div class="quizcard--cards">
<div class="flip-card">
<div class="flip-card-front"><p>Front1</p></div>
<div class="flip-card-back"><p>Back1</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front2</p></div>
<div class="flip-card-back"><p>Back2</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front3</p></div>
<div class="flip-card-back"><p>Back3</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front4</p></div>
<div class="flip-card-back"><p>Back4</p><button class="next">flip</button></div>
</div>
<div class="flip-card">
<div class="flip-card-front"><p>Front5</p></div>
<div class="flip-card-back"><p>Back5</p><button class="next">flip</button></div>
</div>
</div>
<div class="quizcard--buttons">
<button id="nope"><i class="fa fa-remove"></i></button>
<button id="love"><i class="fa fa-check"></i></button>
</div>
</div>
While adding Events to a class in JS you should use getElementsByClassName instead of getElementById .
Try this code
document.getElementsByClassName('next').onclick = function() { document.getElementById('flip-card').classList.toggle('do-flip'); };