Use css keyframes in Javascript

@RahulkAug 20.2021

I need to perform some animations in my project by using JavaScript.In my project, i want to draw some lines on the sheet at different angles & for this purpose i have used a stencil to draw but animations are not working properly. All i want is that the stencil must be back to its original position after performing animation(drawing line). I have attached a zip document file for your reference.

Steps to perform project are as follows.

1. Click on the arrows one by one.

2. Scales will appear.

3. Click on each scale one by one.

4. On each click on scale, stencil will draw one line.

to post a comment

Full-stack Developer

14 Comments(s) _↴

@SempervivumAug 20.2021 — #No zip file visible. Please post the code here and use code tags: `your code here` or triple backticks.

@RahulkauthorAug 20.2021 — #

``<i>
 </i>function Reset() 
 {
 
 window.location.reload();
 }
 
 function show_hide1()
 {
 if (document.getElementById("field-div1").src = "images/arrow1.png") 
 {
 document.getElementById("field-div1").style.display="none";
 document.getElementById("image1").style.display="inline";
 
 }
 
 else
 {
 document.getElementById("field-div1").src = "images/arrow1.jpg";
 document.getElementById("image1").style.display="inline";
 
 }
 
 
 }
 function show_hide2()
 {
 if (document.getElementById("field-div2").src = "images/arrow2.png") 
 {
 
 document.getElementById("field-div2").style.display="none";
 document.getElementById("image2").style.display="inline";
 
 }
 
 
 
 
 else
 {
 document.getElementById("field-div2").src = "images/arrow2.png";
 }
 
 
 }
 function show_hide3()
 {
 if (document.getElementById("field-div3").src = "images/arrow3.png") 
 {
 
 document.getElementById("field-div3").style.display="none";
 document.getElementById("image3").style.display="inline";
 
 
 
 
 
 }
 
 else
 {
 document.getElementById("field-div3").src = "images/arrow3.png";
 }
 
 
 }
 function show_hide4()
 {
 if (document.getElementById("field-div4").src = "images/arrow4.png") 
 {
 
 document.getElementById("field-div4").style.display="none";
 document.getElementById("image4").style.display="inline";
 
 
 
 
 }
 
 else
 {
 document.getElementById("field-div4").src = "images/arrow4.png";
 
 }
 
 
 }
 function show_hide5()
 {
 if (document.getElementById("field-div5").src = "images/arrow4.png") 
 {
 
 document.getElementById("field-div5").style.display="none";
 document.getElementById("image5").style.display="inline";
 
 }
 
 else
 {
 document.getElementById("field-div5").src = "images/arrow4.png";
 }
 
 
 }
 function draw1()
 {
 document.getElementById("image1").style.display="none";
 document.getElementById("drawobjimg").style.transform="translate(-95px,-55px)scale(1)rotateY(150deg)";
 
 document.getElementById("lineobj1img").style.display="inline";
 
 
 
 }
 
 function draw2()
 {
 document.getElementById("image2").style.display="none";
 document.getElementById("drawobjimg").style.transform="translate(-100px,-75px)scale(2)rotateY(120deg)";
 document.getElementById("lineobj2img").style.display="inline";
 
 }
 
 function draw3()
 {
 document.getElementById("image3").style.display="none";
 document.getElementById("drawobjimg").style.transform="translate(-55px,-100px)scale(3)rotateY(-280deg)";
 document.getElementById("lineobj3img").style.display="inline";
 
 }
 
 function draw4()
 {
 document.getElementById("image4").style.display="none";
 document.getElementById("drawobjimg").style.transform="translate(-45px,-75px)scale(2)rotateY(-290deg)";
 document.getElementById("lineobj4img").style.display="inline";
 
 }
 
 function draw5()
 {
 document.getElementById("image5").style.display="none";
 document.getElementById("drawobjimg").style.transform="translate(-40px,-55px)rotateY(-390deg)";
 document.getElementById("lineobj5img").style.display="inline";
 
 }
 
 const imgs = Array.from(document.querySelectorAll('.scale'));
 // Add event listener for document:
 document.addEventListener('click', event =&gt; {
 // Has one of the images been clicked?
 if (event.target.classList.contains('scale')) {
 // Add class indicating that is has been clicked:
 event.target.classList.add('is-clicked');
 // Check if all images have been clicked:
 if (!imgs.find(item =&gt; !item.classList.contains('is-clicked'))) {
 // Make button visible:
 
 document.querySelector('#next').style.display = 'inline';
 alert ("Please click on the Result button to proceed further ")
 }
 
 }
 });<i>
 </i>``

@RahulkauthorAug 20.2021 — #drawobjimg : id of stencil

@SempervivumAug 20.2021 — #The same hint again first:

Single backticks (probably created by the button `</></C>) won't work reliably when posting code. You better use code tags: <C>your code here` or triple backticks. I edited your posting accordingly.

Unfortunately I was not able to guess from your javascript code how your HTML and CSS reads. Please post it too.

@RahulkauthorAug 21.2021 — #ok sorry for the inconvenience.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=2"&gt;
 &lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;
 &lt;script src="jquery/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="jquery/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
 &lt;script src="jquery/jquery-ui.min.js"&gt;&lt;/script&gt;
 &lt;link href="CSS/style.css" rel="stylesheet" type="text/css"&gt;
 &lt;script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body &gt;
 &lt;h1&gt;&lt;center&gt;&lt;u&gt;Carry out Contouring in the field&lt;/u&gt;&lt;/center&gt;&lt;/h1&gt;
 &lt;div id="main"&gt;
 
 &lt;div id="ar1"&gt;&lt;img src="imagesarrow1.png" id="field-div1" onclick="show_hide1()"&gt;&lt;/div&gt;&lt;div id="image1" onclick="draw1()"&gt;&lt;img id="scale1" class="scale" src="imagess1.jpg" &gt;&lt;/div&gt;
 &lt;div id="ar2"&gt;&lt;img src="imagesarrow2.png" id="field-div2" onclick="show_hide2()"&gt;&lt;/div&gt;&lt;div id="image2" onclick="draw2()"&gt;&lt;img id="scale2" class="scale" src="imagess2.jpg" &gt;&lt;/div&gt;
 &lt;div id="ar3"&gt;&lt;img src="imagesarrow3.png" id="field-div3" onclick="show_hide3()"&gt;&lt;/div&gt;&lt;div id="image3" onclick="draw3()"&gt;&lt;img id="scale3" class="scale" src="imagess3.jpg" &gt;&lt;/div&gt;
 &lt;div id="ar4"&gt;&lt;img src="imagesarrow4.png" id="field-div4" onclick="show_hide4()"&gt;&lt;/div&gt;&lt;div id="image4" onclick="draw4()"&gt;&lt;img id="scale4" class="scale" src="imagess4.jpg" &gt;&lt;/div&gt;
 &lt;div id="ar5"&gt;&lt;img src="imagesarrow5.png" id="field-div5" onclick="show_hide5()"&gt;&lt;/div&gt;&lt;div id="image5" onclick="draw5()"&gt;&lt;img id="scale5" class="scale" src="imagess5.jpg" &gt;&lt;/div&gt;
 
 
 
 &lt;div id="sheet"&gt;
 
 &lt;img id="lineobj1img" src="imagesline1.png"&gt;
 &lt;img id="lineobj2img" src="imagesline2.png"&gt;
 &lt;img id="lineobj3img" src="imagesline3.png"&gt;
 &lt;img id="lineobj4img" src="imagesline4.png"&gt;
 &lt;img id="lineobj5img" src="imagesline5.png"&gt;
 
 &lt;img id="refimg" src="imagesref1.png" alt="ref point"&gt;
 &lt;img id="drawobjimg" src="imagesdrawobj.png" class="drawobjimg"&gt;
 &lt;/div&gt;
 &lt;img id="tripodimg" src="imagestri.png" class="tripodimg" &gt;
 &lt;/div&gt;
 &lt;center&gt;&lt;button id="reset" onclick="Reset()"&gt;Reset&lt;/button&gt;&lt;/center&gt;
 &lt;center&gt;&lt;a href="2.html"&gt;&lt;button id="next" onclick="next()"&gt;Result&lt;/button&gt;&lt;/a&gt;&lt;/center&gt;
 &lt;script src="js/main.js"&gt;&lt;/script&gt;
 &lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@RahulkauthorAug 21.2021 — #

<i>
 </i>#body
 {
 background-color: blue;
 }
 #main
 {
 background-image: url("../images/image.png");
 height: 600px;
 width: 1200px;
 }
 @media screen and (max-width: 1200px) {
 div.example {
 display: none;
 }
 }
 #image1{
 float: left;
 margin-top: 160px;
 margin-left: 490px;
 height: 100px;
 width: 50px;
 position:absolute;
 display: none;
 cursor: pointer;
 }
 #scale1{
 height:150px;
 width:20px;
 float:left;
 position:absolute;
 }
 #image2{
 float: left;
 margin-top: 140px;
 margin-left: 570px;
 height: 80px;
 width: 25px;
 position:absolute;
 display: none;
 cursor: pointer;
 }
 #scale2{
 height:150px;
 width:20px;
 float:left;
 position:absolute;
 }
 #image3{
 float: left;
 margin-top: 150px;
 margin-left: 650px;
 height: 80px;
 width: 25px;
 position:absolute;
 display: none;
 cursor: pointer;
 }
 #scale3{
 height:150px;
 width:20px;
 float:left;
 position:absolute;
 }
 #image4{
 float: left;
 margin-top: 170px;
 margin-left: 730px;
 height: 80px;
 width: 25px;
 position:absolute;
 display: none;
 cursor: pointer;
 }
 #scale4{
 height:150px;
 width:20px;
 float:left;
 position:absolute;
 }
 #image5{
 <br/>
 <i>    </i>float: left;
 <i>    </i>margin-top: 200px;
 <i>    </i>margin-left: 810px;
 <i>    </i>height: 80px;
 <i>    </i>width: 25px;
 <i>    </i>position:absolute;
 <i>    </i>display: none;
 <i>    </i>cursor: pointer;
 
 }
 #scale5{
 height:150px;
 width:20px;
 float:left;
 position:absolute;
 padding-bottom:200px;
 }
 
 #field{
 position: relative;
 }
 #field-div1
 {
 margin-top: 230px;
 margin-left: 490px;
 float: left;
 height: 80px;
 width: 25px;
 position:absolute;
 }
 
 #field-div2
 {
 float: left;
 margin-top: 230px;
 margin-left: 570px;
 height: 80px;
 width: 25px;
 position:absolute;
 }
 #field-div3
 {
 float: left;
 margin-top: 220px;
 margin-left: 650px;
 height: 80px;
 width: 25px;
 position:absolute;
 }
 #field-div4
 {
 float: left;
 margin-top: 235px;
 margin-left: 730px;
 height: 80px;
 width: 25px;
 position:absolute;
 }
 #field-div5
 {
 float: left;
 margin-top: 250px;
 margin-left: 810px;
 height: 80px;
 width: 25px;
 position:absolute;
 }
 
 #lineobj1img
 {
 width: 90px;
 height: 100px;
 margin-top: 30px;
 float:left;
 display: none;
 position:absolute;
 }
 #lineobj2img
 {
 width: 90px;
 height: 100px;
 margin-top: 30px;
 float:left;
 display: none;
 position:fixed;
 margin-left:10px;
 animation-delay: 10s;
 }
 #lineobj3img
 {
 width:90px;
 height:80px;
 margin-top: 5px;
 float:left;
 display: none;
 position:fixed;
 margin-left: 35px;
 animation-delay: 10s;
 }
 
 #lineobj4img
 {
 width: 90px;
 height: 100px;
 margin-top: 28px;
 float:left;
 display: none;
 position:fixed;
 margin-left: 30px;
 animation-delay: 10s;
 }
 #lineobj5img
 {
 width: 90px;
 height: 100px;
 margin-top: 28px;
 float:left;
 display: none;
 position:fixed;
 margin-left: 50px;
 animation-delay: 10s;
 }
 #refimg{
 margin-top: 80px;
 margin-left: 53px;
 height:30px;
 width:30px;
 position:absolute;
 }
 #drawobjimg
 {
 margin-top:100px;
 margin-left:100px;
 height: 50px;
 width: 70px;
 position:absolute;
 
 }
 
 <br/>
 <br/>
 
 #sheet
 {
 margin-top: 345px;
 margin-left: 575px;
 margin-bottom: 0px;
 float: left;
 height: 160px;
 width:140px;
 background-color:#DEDEDE;
 transform: perspective(750px)scaleZ(2)rotateX(70deg);
 opacity:0.9;
 border: 1px 1px 5px 5px solid ;
 border-color: #B7410E ;
 position:absolute;
 }
 #tripodimg
 {
 float: left;
 position: absolute;
 margin-top: 460px;
 height: 135px;
 width: 150px;
 margin-left: 570px;
 }
 #reset
 { 
 margin-top: 5px;
 float: left;
 height: 40px;
 width: 150px;
 margin-left: 500px;
 border-radius:10px white;
 border:3px solid white;
 color:white;
 background-color: #00394d;
 font-size: medium;
 font-weight: bold;
 
 
 }
 #next
 {
 margin-top: 5px;
 height: 40px;
 width: 150px;
 margin-left: 100px;
 border-radius:10px white;
 border:3px solid white;
 color:white;
 background-color: #00394d;
 font-size: medium;
 font-weight: bold;
 float: left;
 display: none;
 <br/>
 }

@SempervivumAug 21.2021 — #Fine, you tried to use code tags now. However their syntax is not HTML but BBCode, therefore you have to use square brackets like this:

`your code here`

The code is available now but the images are still missing. Can you provide them too, e. g. by uploading them to your webspace and posting the links?

@RahulkauthorAug 21.2021 — #![https://ibb.co/fYQpZyt

https://ibb.co/Z8LpDtb

https://ibb.co/NmxwwHJ

https://ibb.co/n3x0c6T

https://ibb.co/4dGMXRr

https://ibb.co/Vv3qXXw

https://ibb.co/Xp0wxD8](https://)

@SempervivumAug 21.2021 — #I seems to me that these are screenshots, however I need the original files arrow1.png, arrow2.png, ... line1.png, line2.png, ... and so on.

@RahulkauthorAug 21.2021 — #![https://ibb.co/sjH6k3c

https://ibb.co/wJZKLdR

https://ibb.co/wJZKLdR

https://ibb.co/wJZKLdR

https://ibb.co/wJZKLdR

https://ibb.co/XJW03GD

https://ibb.co/1J70r2d

https://ibb.co/yBjqQtg

https://ibb.co/512LdV4

https://ibb.co/t8DmNYw

https://ibb.co/jJf79cT

https://ibb.co/LY0cN8H

https://ibb.co/kMdP5TV

https://ibb.co/mXbDvNz

https://ibb.co/kQDRwQq

https://ibb.co/TknyDPv

https://ibb.co/1JC0JfT

https://ibb.co/dQ3ZLYk

https://ibb.co/tCsBFkc

https://ibb.co/HgRydzs

https://ibb.co/CtD3MtK

https://ibb.co/B6qS3ch

https://ibb.co/VSvXNLv

https://ibb.co/hYJbycC

https://ibb.co/hYJbycC

https://ibb.co/hYJbycC

https://ibb.co/hYJbycC

https://ibb.co/hYJbycC

https://ibb.co/R7d5j9V

https://ibb.co/DVfs2GZ

https://ibb.co/1X9Hx1y

https://ibb.co/1X9Hx1y

https://ibb.co/1X9Hx1y

https://ibb.co/1X9Hx1y

https://ibb.co/1X9Hx1y

https://ibb.co/NxyCnc0](https://)

@SempervivumAug 21.2021 — #A few files are duplicate and a few are missing but I could complete the relevant parts of my test file.

Unfortunately I cannot spot any animation. The drawobj.png moves to the start of the line rapidly but subsequently nothing happens. In the CSS I see `animation-delay` four times but no keyframes. Is there still missing something?

What I would expect: The draw object moves to the start of the line, then moves to the end of the line, then moves back to it's position bottom right on the desk.

@RahulkauthorAug 21.2021 — #yes, the draw object moves to draw a line & then moves back to its original position.

@RahulkauthorAug 21.2021 — #Can you please explain it ( keyframes animation in JavaScript ) by giving any example of yours?

@SempervivumAug 21.2021 — #It's all on the web, read this:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Link to examples here:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#examples

and come back and ask if you encounter any difficulty applying it to your own task.