The problem is here:
animation: tweek 1s linear infinite;
The “infinite” is an attribute called animation-iteration-count. It defaults to 1, but since you have it set to infinite, it will continue to show this animation looping forever.
Solution 1 :
Solution 2 :
I have found the correct answer thanks to @iamjane who gave me the idea..
I have added timeout funtion which removes the element after a specific time..
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
@keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>Problem :
I am trying to append a new child when user clicks on a button. The new child is already defined with few CSS properties. Is it possible to do so ? I have tried a few codes, the best i could do is –
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
}*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
@keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>This was good uptil here but the problem is that when we click button the box is getting appended continously, i want it to append only once if the button is clicked once if twice then again and so on.. Please help me..Any help will be appreciated.
Comments
Comment posted by Utkarsh Tyagi
I have edited my post this time without infinite but a new problem arrises now. Please view the snippet for detail, also thanks for efforts 😀
Comment posted by This question
I’m not sure what you want to happen with your code.
Comment posted by Utkarsh Tyagi
Thanks a lot dude u gave me a hint that helped me out..