Walk cycle CSS3 animation
How do I make an walk cycle css3 animation?
A simple walk cycle animation using a sprite image and CSS3 keyframe animation.. What is a walk cycle css3 animation? How do you make a walk cycle css3 animation? This script and codes were developed by Mauritius D'Silva on 16 November 2022, Wednesday.
Walk cycle CSS3 animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Walk cycle CSS3 animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Walk cycle CSS3 animation</h1>
<div id="animation"></div>
</body>
</html>
Walk cycle CSS3 animation - Script Codes CSS Codes
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300';
body { width: 100%; height: 100%; color: #333; background:#ffdb4f; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1{ text-align:center; font-weight: 300;
}
/* Walk cycle sprite image from: http://blog.nanchu.me */
#animation{ margin:0 auto; /* for demo purpose only */ width: 83.33333333333333px; /* the total width of the sprite image divided by each frame width */ height: 126px;
background:url(https://38.media.tumblr.com/tumblr_mb4zsyUYCT1rvuv0d.png); -webkit-animation: walk-cycle 1.0s steps(6) infinite; -o-animation: walk-cycle 1.0s steps(6) infinite; animation: walk-cycle 1.0s steps(6) infinite; /* the sprite has 6 frames hence: steps(6) */
}
/* Walk cycle animation */ @keyframes walk-cycle{ 0% { background-position: 0px; } 100% { background-position: -500px; /* loop the animation frames once the end of the image is reached, the total width of the sprite image is 500px */ } }
Developer | Mauritius D'Silva |
Username | mauritiusdsilva |
Uploaded | November 16, 2022 |
Rating | 3 |
Size | 1,911 Kb |
Views | 72,864 |
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!
Name | Size |
Pure CSS3 folded corner effect | 2,922 Kb |
CSS3 Button Hover Animation | 2,134 Kb |
Numbered FAQs | 1,888 Kb |
Pure CSS3 Overlay Ribbon | 2,903 Kb |
Team member profile display | 3,017 Kb |
Weather widget | 4,423 Kb |
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!
Name | Username | Size |
A Pen by panstable | Panstable | 2,940 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Minimelephant | Smashlee | 2,507 Kb |
CubeTronic | Jurbank | 3,716 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!