Linear Step Keyframe Animation

Developer
Rob Levin
Size
3,005 Kb
Views
8,096
  1. Linear Step Keyframe Animation Previews
  2. Linear Step Keyframe Animation HTML Codes
  3. Linear Step Keyframe Animation CSS Codes

How do I make an linear step keyframe animation?

TLDR; just a ball that is evenly spaced to create a "linear easing". The animation simply steps through the SVG sprite from one negative horizontal end of the background across to the other end.... What is a linear step keyframe animation? How do you make a linear step keyframe animation? This script and codes were developed by Rob Levin on 13 December 2022, Tuesday.

Linear Step Keyframe Animation Previews
IQ Test

Linear Step Keyframe Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Linear Step Keyframe 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="container"> <div class="ball"> </div>
</div>
<div class="container-small"> <div class="ball2"></div>
</div>
<div class="container-small"> <div class="ball3"></div>
</div>
<p>Notes and Observations</p>
<ul> <li>Top 2 balls @12fps, bottom @24fps</li> <li>Top blue ball seems to suffer from the overall width of the "cells" and the spacing on the inbetweens (maybe?)</li> <li>Middle ball looks a bit smoother due to reduced overall width and spacing (but it's still fairly choppy)</li> <li>Bottom ball at 24fps looks "fuzzy".</li> <li>It seems that shapes that don't change much (ex these balls) don't trick the eye enough to lend themselves to step/sprite animation (maybe?)</li> <li>the linear spacing probably adds to the "choppy" perception (vs. slow in/out spacing)</li> <li>TODO: Add something irregular to see if it looks any better :)</li>
</ul>
</body>
</html>

Linear Step Keyframe Animation - Script Codes CSS Codes

.container,
.container-small { background: white; width: 100%; background-size: 100% auto; height: 175px; position: relative;
}
.container-small { height: 75px;
}
.ball { background: url(https://www.dropbox.com/s/y3vq8xmbhq8l8tw/linear-ball-sprite3.svg?raw=1); width: 612px; height: 172px; position: absolute; top: 10%; -webkit-animation: evenly 2.08333s steps(25) infinite; animation: evenly 2.08333s steps(25) infinite;
}
.ball2, .ball3 { background: url(https://www.dropbox.com/s/x86h52t3o40duw4/linear-sprite-smaller.svg?raw=1); width: 150px; height: 38px; position: absolute; top: 10%;
}
.ball2 { -webkit-animation: smaller 2.08333s steps(25) infinite; animation: smaller 2.08333s steps(25) infinite;
}
.ball3 { -webkit-animation: smaller 1.04167s steps(25) infinite; animation: smaller 1.04167s steps(25) infinite;
}
@-webkit-keyframes evenly { 100% { background-position: -15300px 0; }
}
@keyframes evenly { 100% { background-position: -15300px 0; }
}
@-webkit-keyframes smaller { 100% { background-position: -3752px 0; }
}
@keyframes smaller { 100% { background-position: -3752px 0; }
}
Linear Step Keyframe Animation - Script Codes
Linear Step Keyframe Animation - Script Codes
Home Page Home
Developer Rob Levin
Username roblevin
Uploaded December 13, 2022
Rating 3
Size 3,005 Kb
Views 8,096
Do you need developer help for Linear Step Keyframe 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!

Rob Levin (roblevin) Script Codes
Name
Collapsing Margins
Simple Snap.svg Drawing Example
Horizontal Formatting
Code-reviewed
SVG Frontend Masters Study Notes
Simple Snap.svg Example
Absolute fixed header footer with scrolling main content
Centering
Vertical Formatting
Pricing Plan Experiment
Create amazing art & images 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!