Simple CSS3 animation with JavaScript

Developer
Mattia A Fritz
Size
2,029 Kb
Views
60,720
  1. Simple CSS3 animation with JavaScript Previews
  2. Simple CSS3 animation with JavaScript HTML Codes
  3. Simple CSS3 animation with JavaScript CSS Codes
  4. Simple CSS3 animation with JavaScript JS Codes

How do I make an simple css3 animation with javascript?

Enabling CSS3 animation by adding a class to an element. . What is a simple css3 animation with javascript? How do you make a simple css3 animation with javascript? This script and codes were developed by Mattia A Fritz on 26 August 2022, Friday.

Simple CSS3 animation with JavaScript Previews
IQ Test

Simple CSS3 animation with JavaScript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS3 animation with JavaScript</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="myDiv">Moving color box</div>
<button id="animationBtn">Animate</button>
<button id="resetBtn">Reset</button> <script src="js/index.js"></script>
</body>
</html>

Simple CSS3 animation with JavaScript - Script Codes CSS Codes

/* The animation code */
@keyframes example { from { background-color: red; maring-left: 0px; color: #FFF; } to { background-color: yellow; margin-left: 600px; color: #000; }
}
div { width: 300px; height: 200px; background-color: red; margin-bottom: 20px; line-height: 200px; text-align: center; font-size: 2em; color: #FFF; border: 1px solid #000;
}
/* The element to apply the animation to */
div.animation { animation-name: example; animation-duration: 5s; animation-fill-mode: forwards;
}

Simple CSS3 animation with JavaScript - Script Codes JS Codes

//Identifier le div à animer dans le DOM
var myDIv = document.getElementById("myDv");
//Animation suite au click sur le bouton
document.getElementById("animationBtn").onclick = function() { //Ajouter la class avec l'animation CSS3 au div myDiv.classList.add("animation");
}
//Reset
document.getElementById("resetBtn").onclick = function () { //Enlever la class avec l'animation CSS3 au div myDiv.classList.remove("animation");
}
Simple CSS3 animation with JavaScript - Script Codes
Simple CSS3 animation with JavaScript - Script Codes
Home Page Home
Developer Mattia A Fritz
Username mafritz
Uploaded August 26, 2022
Rating 3
Size 2,029 Kb
Views 60,720
Do you need developer help for Simple CSS3 animation with JavaScript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mattia A Fritz (mafritz) Script Codes
Name
P5.js example redefine draw function
Simple manipulation du DOM avec JavaScript
Simple animation SVG avec JavaScript
CSS animation
Use CSS to style SVG elements
P5.js example with button
Utiliser dynamiquement des classes avec JavaScript
Client Side JavaScript basic example
JavaScript and time
Different size of columns according to screen size
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!