Example of rotation, slide, translation and zoom animation in html, css and javascript.

Click on the button to see animation. Animation will apply on green box.

Code

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{height:50%; width:50%;}

.box{top:45%; left:45%; height:10vw; width:10vw; position:absolute; border:2px solid black; background-color:green; }

.button{top:50%; display:flex; flex-direction:row; flex-wrap:wrap; }

button{width:20%; margin:5%; }

@keyframes Rotate{
100%{transform:rotate(360deg);}
}
@keyframes slideup{
100%{top:0%; opacity:0;}
}
@keyframes slidedown{
100%{top:100%; opacity:0;}
}
@keyframes TransL{
100%{left:0%;}
}
@keyframes TransR{
100%{left:85%;}
}
@keyframes zoom{
100%{transform:scale(2.0);}
}
</style>
</head>

<body>
<p><div id="main" class="container">
     <div id="child" class="box"></div></p>
</div>
<div class="button">
<button onclick="Rotate()">Rotate</button>
<button onclick="SlideUp()">Slide Up</button>
<button onclick="SlideDown()">Slide Down</button>
<button onclick="TransL()">Translate Left</button>
<button onclick="TransR()">Translate Right</button>
<button onclick="Zoom()">Zoom</button>
</div>
<script>
function Rotate(){
const div=document.getElementById("child");
div.style.animation="Rotate 2s";
}
function SlideUp(){
const div=document.getElementById("child");
div.style.animation="slideup 1s";
}
function SlideDown(){
const div=document.getElementById("child");
div.style.animation="slidedown 1s";
}
function TransL(){
const div=document.getElementById("child");
div.style.animation="TransL 2s";
}
function TransR(){
const div=document.getElementById("child");
div.style.animation="TransR 2s";
}
function Zoom(){
const div=document.getElementById("child");
div.style.animation="zoom 1s";
}
</script>
</body>
</html>

Example of rotation, slide, translation and zoom animation in html, css and javascript.

Comments

Leave a Reply Cancel reply

How to make shower animation using html, css and javascript.

How to make shower animation using html, css and javascript.

Example of rotation, slide, translation and zoom animation in html, css and javascript.