Develop Reference

Trigger css class onclick with javascript

this question is newbie but i'm stuck in this thing. I hope someone can help me.
I have this code:
HTML:
<div class='zone11'>
<div class='book11'>
<div class='cover11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='last-page11'></div>
<div class='back-cover11'></div>
</div>
</div>
CSS:
.zone11{
height: 700px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.book11{
display: flex;
align-items: center;
cursor: pointer;
}
.book11:hover .cover11{
transform: rotateX(10deg) rotateY(-180deg);
}
.book11:hover .page11{
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.cover11{
z-index: 1;
transition: all 3.5s;
}
.back-cover11{
z-index: -3;
}
.cover11, .back-cover11{
height: 450px;
width: 360px;
background: #3f0035;
border-radius: 2px 20px 20px 2px;
position: absolute;
box-shadow: 1px 1px 10px gray;
transform: rotateX(10deg);
transform-origin: center left;
}
.page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -1;
}
.last-page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -2;
}
.page11:nth-child(2){
transition-duration: 3s;
}
.page11:nth-child(3){
transition-duration: 2.6s;
}
.page11:nth-child(4){
transition-duration: 2.2s;
}
.page11:nth-child(5){
transition-duration: 1.8s;
}
.page11:nth-child(6){
transition-duration: 1.4s;
}
.book11:hover .page11:nth-child(2){
transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
transition-duration: 4.4s;
}
Now, this way I have an animation of a book that when you hover, it opens to one page (with 5 pages scrolling before you get there). I want to remove the hover and make sure that it opens and closes on click.
I removed the hover from the classes. For example the cover:
.cover11__open{
transform: rotateX(10deg) rotateY(-180deg);
}
And then in the javascript:
var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
});
The latter thing has worked on other occasions but it doesn't work here. I also tried something else found on the internet but nothing. Thanks.

You can try adding this to your css:
.book11 .cover11__open {
transform: rotateX(10deg) rotateY(-180deg);
}
.book11__open .page11 {
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.book11__open .page11:nth-child(2) {
transition-duration: 6s;
}
.book11__open .page11:nth-child(3) {
transition-duration: 5.6s;
}
.book11__open .page11:nth-child(4) {
transition-duration: 5.2s;
}
.book11__open .page11:nth-child(5) {
transition-duration: 4.8s;
}
.book11__open .page11:nth-child(6) {
transition-duration: 4.4s;
}
and keep every hover removes/commented there is no need for it
and add this too in the javascript instead of the current onclick
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
book11.classList.toggle('book11__open')//this is the added line.
});
basically I just added the classes .cover11__open and .book11__open to the css with the properties given to the hover. now when clicking on the cover these two classes get added/removed. and great animation btw.

Background of box not changing color when responsive | HTML, CSS

I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #6665ee;
}
.skill-bars{
padding: 25px 30px;
width: 600px;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
#media all and (max-width: 500px) {
.skill-bars{
background: black;
}
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: #6665ee;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span{
width: 90%;
}
.bar .progress-line.css span{
width: 60%;
}
.bar .progress-line.jquery span{
width: 85%;
}
.bar .progress-line.python span{
width: 50%;
}
.bar .progress-line.mysql span{
width: 75%;
}
.progress-line span::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span::after{
content: "90%";
}
.progress-line.css span::after{
content: "60%";
}
.progress-line.jquery span::after{
content: "85%";
}
.progress-line.python span::after{
content: "50%";
}
.progress-line.mysql span::after{
content: "75%";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="skill-bars">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line html">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>jQuery</span>
</div>
<div class="progress-line jquery">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>Python</span>
</div>
<div class="progress-line python">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>MySQL</span>
</div>
<div class="progress-line mysql">
<span></span>
</div>
</div>
</div>
</body>
</html>
So here for some reason, the background of the box turns black when you inspect the page and set it to responsive - that is what I want - but on my end, it does not work. Am I missing a reference link or something?
It does not work here: https://replit.com/join/wgghqoeseb-hussainomer1
What reference link do I seem to be missing? Any suggestions?

Add this to the header
<meta name="viewport" content="width=device-width, initial-scale=1" />
It helps the website position with the right viewport.
For more info checkout
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Vuejs transition is not working to show a modal

I am at a loss to why my animation is not working using vue transitions. Here is my code:
<template>
<teleport to="body">
<div class="modal-overlay" v-if="loading">
<transition name="loading">
<div v-if="loading" class="dialog">
<h1>LOADING</h1>
</div>
</transition>
</div>
</teleport>
</template>
<script>
export default {
props: ["loading"],
};
</script>
<style scoped>
.dialog {
text-align: center;
border-radius: 10px;
width: 10%;
border: 2px solid #00f6f6;
background-color: #0f0f0f;
color: #efefef;
padding: 10px;
/* animation: enter 0.25s linear; */
overflow: hidden;
}
.modal-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.loading-enter-active {
animation: enter 0.2s ease-out;
}
.loading-leave-active {
animation: leave 0.2s ease-in;
}
#keyframes enter {
0% {
opacity: 0%;
transform: scale(0);
}
100% {
opacity: 100%;
transform: scale(1);
}
}
#keyframes leave {
0% {
transform: scale(1);
opacity: 100%;
}
100% {
transform: scale(0);
opacity: 0%;
}
}
</style>
I am passing a prop from the parent component called "loading". This serves as a modal and it serves the purpose as the modal is it does appear and disappear based on the value of "loading" but the animation is not working. Can anyone tell me why?
Thank you!

It's because you have v-if="loading" on .modal-overlay. This doesn't give it a chance to evaluate the condition and transition the element.
Remove that and it should work:
Vue.createApp({
data() {
return {
loading: false
}
},
created() {
setInterval(() => {
this.loading = !this.loading
}, 2000)
}
}).mount('#app')
.dialog {
text-align: center;
border-radius: 10px;
width: 10%;
min-width: fit-content;
border: 2px solid #00f6f6;
background-color: #0f0f0f;
color: #efefef;
padding: 10px;
/* animation: enter 0.25s linear; */
overflow: hidden;
}
.modal-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.loading-enter-active {
animation: enter 0.2s ease-out;
}
.loading-leave-active {
animation: enter 0.2s ease-in reverse;
}
#keyframes enter {
0% {
opacity: 0%;
transform: scale(0);
}
100% {
opacity: 100%;
transform: scale(1);
}
}
<script src="https://unpkg.com/vue#next"></script>
<div id="app">
<teleport to="body">
<div class="modal-overlay">
<transition name="loading">
<div class="dialog" v-if="loading">
<h1>LOADING</h1>
</div>
</transition>
</div>
</teleport>
</div>

Well, I was facing similar problem when i was using Modal. From your question, i understood that you have problem with the transition, that is because of the <style scoped>.
You can go through this link https://cli.vuejs.org/guide/css.html#referencing-assets for better understanding how the CSS works in Vue/cli projects.
I am not sure why you have used <div v-if="loading" class="dialog">, first remove the v-if and then try adding a class to CSS <style lang="scss" scoped>.
If this is working fine for you, then you can add v-if or anything according to your requirements.
Thank you, I hope this will help you.

Animation in CSS

I want to know how can you edit/modify the css so that it starts the animation when the user scrolls at the page where the whole animation or the skills bar in my case, is visible.
The animation works but the problem I am facing is that it works on the load of the website, and when I get to the skills bar the animation has been already played and it is not there anymore.
See the example below:
https://drive.google.com/file/d/1ogZE87xoeJV4vbMkE7fBV068ERMzd8it/view
This is an example, see how the animation plays when the user scrolls down to that page or section? I would like the same to happen with the below code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20{
height: 100%;
place-items: center;
background: transparent;
}
::selection{
color: #fff;
background: black;
}
.skill-bars{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span18{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span18{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span18{
width: 84%;
}
.bar .progress-line.css span18{
width: 76%;
}
.bar .progress-line.jquery span18{
width: 91%;
}
.bar .progress-line.python span18{
width: 59%;
}
.bar .progress-line.mysql span18{
width: 70%;
}
.progress-line span18::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span18::after{
content: "84%";
}
.progress-line.css span18::after{
content: "76%";
}
.progress-line.jquery span18::after{
content: "91%";
}
.progress-line.python span18::after{
content: "59%";
}
.progress-line.mysql span18::after{
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.skill-bars1 .bar1{
margin: 20px 0;
}
.skill-bars1 .bar1:first-child{
margin-top: 0px;
}
.skill-bars1 .bar1 .info1{
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar1 .progress-line1 span19{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar1 .progress-line1.html1 span19{
width: 61%;
}
.bar1 .progress-line1.css1 span19{
width: 50%;
}
.bar1 .progress-line1.jquery1 span19{
width: 68%;
}
.bar1 .progress-line1.python1 span19{
width: 82%;
}
.bar1 .progress-line1.mysql1 span19{
width: 98%;
}
.progress-line1 span19::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line1 span19::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line1.html1 span19::after{
content: "61%";
}
.progress-line1.css1 span19::after{
content: "50%";
}
.progress-line1.jquery1 span19::after{
content: "68%";
}
.progress-line1.python1 span19::after{
content: "82%";
}
.progress-line1.mysql1 span19::after{
content: "98%";
}
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18>Harvard CS50 Course</span18>
</div>
<div class="progress-line html">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Youtube Channel (Java Tutorials)</span18>
</div>
<div class="progress-line css">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>C++</span18>
</div>
<div class="progress-line jquery">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="progress-line python">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="progress-line mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="progress-line1 html1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Basketball</span19>
</div>
<div class="progress-line1 css1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="progress-line1 jquery1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="progress-line1 python1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>University Supplementary Applications &#128522</span19>
</div>
<div class="progress-line1 mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</section>
Right now, the animation plays but like I said it only plays on the load of the whole website, but when I reach that section where the skills bar is displayed, the animation does not work. Any suggestions?
BTW I did use bad coding practices which is that I reuseed the same code for skills bar for the second skills bar, I just renamed the classes which I should not have, but I am gradually getting the jist of good coding practices.

Try and add the animation to a class which you only add to the element when it scrolls into view.
Add animation styles to "animate" class.
Add scroll event listener and get skills bar offset-top property.
In the scroll event listener, check whether the offset top of your skills bar is in view, if it is in view, add the "animate" class you created in step 1.
This should start the animation only when you add the class to your skills bar and therefore every time you scroll in view, the animation will be applied

here is an example of setting it on scroll but u have to set it's default to be set if the windows does not overflow
EDITED: less code with foreach instead of separated functions.
$(document).ready(function() {
$(window).scroll(function(event) {
var nxtdiv, nxtdiv2;
var scroll = $(window).scrollTop() + 240;
var trgt = $('.info > span18');
var trgt2 = $('.info1 > span19');
trgt.each(function(e){
nxtdiv = trgt[e].parentNode.nextElementSibling;
if (scroll >= trgt[e].offsetTop && !(nxtdiv.classList.contains('progress-line'))) {
nxtdiv.classList.add('progress-line');
}
});
trgt2.each(function(e){
nxtdiv2 = trgt2[e].parentNode.nextElementSibling;
if (scroll >= trgt2[e].offsetTop && !(nxtdiv2.classList.contains('progress-line1'))) {
nxtdiv2.classList.add('progress-line1');
}
});
});
});
$(window).scroll();
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20 {
height: 100%;
align-items: center;
background: transparent;
}
::selection {
color: #fff;
background: black;
}
.skill-bars {
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.skill-bars .bar {
margin: 20px 0;
}
.skill-bars .bar:first-child {
margin-top: 0px;
}
.skill-bars .bar .info {
margin-bottom: 5px;
}
.skill-bars .bar .info span18 {
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skill-bars .bar .progress-line {
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.bar .progress-line span18 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18 {
width: 84%;
}
.bar .progress-line.css span18 {
width: 76%;
}
.bar .progress-line.jquery span18 {
width: 91%;
}
.bar .progress-line.python span18 {
width: 59%;
}
.bar .progress-line.mysql span18 {
width: 70%;
}
.progress-line span18::before {
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18::after {
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line.html span18::after {
content: "84%";
}
.progress-line.css span18::after {
content: "76%";
}
.progress-line.jquery span18::after {
content: "91%";
}
.progress-line.python span18::after {
content: "59%";
}
.progress-line.mysql span18::after {
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1 {
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.skill-bars1 .bar1 {
margin: 20px 0;
}
.skill-bars1 .bar1:first-child {
margin-top: 0px;
}
.skill-bars1 .bar1 .info1 {
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19 {
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1 {
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.bar1 .progress-line1 span19 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar1 .progress-line1.html1 span19 {
width: 61%;
}
.bar1 .progress-line1.css1 span19 {
width: 50%;
}
.bar1 .progress-line1.jquery1 span19 {
width: 68%;
}
.bar1 .progress-line1.python1 span19 {
width: 82%;
}
.bar1 .progress-line1.mysql1 span19 {
width: 98%;
}
.progress-line1 span19::before {
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line1 span19::after {
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line1.html1 span19::after {
content: "61%";
}
.progress-line1.css1 span19::after {
content: "50%";
}
.progress-line1.jquery1 span19::after {
content: "68%";
}
.progress-line1.python1 span19::after {
content: "82%";
}
.progress-line1.mysql1 span19::after {
content: "98%";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18 id="S1">Harvard CS50 Course</span18>
</div>
<div class="html progress-line">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18 id="S2">Youtube Channel (Java Tutorials)</span18>
</div>
<div class="css progress-line">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18 id="S3">C++</span18>
</div>
<div class="jquery">
<span18></span18>
</div>
</div>
<div id="S4" class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="python">
<span18></span18>
</div>
</div>
<div id="S5" class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div id="S6" class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="html1">
<span19></span19>
</div>
</div>
<div id="S7" class="bar1">
<div class="info1">
<span19>Basketball</span19>
</div>
<div class="css1">
<span19></span19>
</div>
</div>
<div id="S8" class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="jquery1">
<span19></span19>
</div>
</div>
<div id="S9" class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="python1">
<span19></span19>
</div>
</div>
<div id="S10" class="bar1">
<div class="info1">
<span19>University Supplementary Applications &#128522</span19>
</div>
<div class="mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Multiple CSS animations: How to avoid re-triggering one of them?

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq

You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");