CSS3 Spritesheet Fireworks Animation

Developer
Petr Tichy
Size
2,879 Kb
Views
64,768
  1. CSS3 Spritesheet Fireworks Animation Previews
  2. CSS3 Spritesheet Fireworks Animation HTML Codes
  3. CSS3 Spritesheet Fireworks Animation CSS Codes
  4. CSS3 Spritesheet Fireworks Animation JS Codes

How do I make an css3 spritesheet fireworks animation?

This match animation is a part of the Happy New Year GreenSock SVG Animation by Petr Tichy.Check out the whole animation:. What is a css3 spritesheet fireworks animation? How do you make a css3 spritesheet fireworks animation? This script and codes were developed by Petr Tichy on 07 September 2022, Wednesday.

CSS3 Spritesheet Fireworks Animation Previews
IQ Test

CSS3 Spritesheet Fireworks Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Spritesheet Fireworks Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="largeF is-animating"></div>
<button id="playBtn">Toggle</button>
<a href="https://ihatetomatoes.net/happy-new-year/" target="_blank" class="goToDemo">View full demo</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS3 Spritesheet Fireworks Animation - Script Codes CSS Codes

body { background-color: #212121;
}
.largeF { width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_fireworks-frames-white.png") no-repeat top left; opacity: 0;
}
.largeF.is-animating { opacity: 1; -webkit-animation: fire 1s steps(21, end) 0s 5; animation: fire 1s steps(21, end) 0s 5;
}
@-webkit-keyframes fire { 0% { opacity: 1; background-position: 0 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 90% { opacity: 0.8; } 100% { opacity: 0; background-position: -3150px 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}
@keyframes fire { 0% { opacity: 1; background-position: 0 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 90% { opacity: 0.8; } 100% { opacity: 0; background-position: -3150px 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}
#playBtn { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.goToDemo { display: block; position: absolute; top: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; text-decoration: none; text-transform: uppercase; padding: 10px 15px; border: 1px #fff solid; opacity: 0.7; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;
}
.goToDemo:hover { background: #fff; color: #212121; opacity: 1;
}

CSS3 Spritesheet Fireworks Animation - Script Codes JS Codes

$('#playBtn').on('click',function(){ $('.largeF').toggleClass('is-animating');
});
CSS3 Spritesheet Fireworks Animation - Script Codes
CSS3 Spritesheet Fireworks Animation - Script Codes
Home Page Home
Developer Petr Tichy
Username ihatetomatoes
Uploaded September 07, 2022
Rating 4
Size 2,879 Kb
Views 64,768
Do you need developer help for CSS3 Spritesheet Fireworks Animation?

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!

Petr Tichy (ihatetomatoes) Script Codes
Name
SVG Match on fire - GreenSock Animation
GreenSock - staggerTo with cycle
GSAP - TweenLite demo - Final
Ihatetomatoes Animation - Crossbrowser
Animated Preloader - GreenSock DrawSVG Plugin
Happy New Year - GreenSock DrawSVG Animation
GreenSock - Click
GreenSock - Scale Box on Hover
Animating SVG With GreenSock
CSS3 Button Hover State
Create amazing Facebook ads 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!