Inertia CSS

Developer

Size

5,065 Kb

Views

40,480

Inertia CSS Previews
Inertia CSS HTML Codes
Inertia CSS CSS Codes
Inertia CSS JS Codes

How do I make an inertia css?

An experiment with creating an Inertia effect on movement with CSS.. What is a inertia css? How do you make a inertia css? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Inertia CSS Previews

Inertia CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inertia CSS</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main role="main" class="m-experiment l-flex-column-one" id="list-moving-up"> <div class="container" id="list-moving-down">	<main role="main" class="content l-flex-column-one" id="list-moving-down"> <h1>Inertia &amp; motion blur</h1> <nav class="m-experiment-navigation">	<ul class="l-flex-row-one">	<li><a href="#list-moving-up" class="m-button-primary">Go up</a></li>	<li><a href="#list-moving-down" class="m-button-secondary">Go down</a></li>	</ul>	</nav> <div class="m-frame"> <ul class="list-moving">	<li class="list-moving-item">	<div class="list-inertia">	<img class="list-item-photo" src="http://www.fillmurray.com/50/50" alt="Bill murray" />	<div class="list-item-content">	<h1>Bill Murray</h1>	<p>Actor</p>	</div>	</div>	</li>	<li class="list-moving-item">	<div>	<img class="list-item-photo" src="http://www.fillmurray.com/50/50" alt="Bill murray" />	<div class="list-item-content">	<h1>Blah</h1>	<p>Test content</p>	</div>	</div>	</li>	<li class="list-moving-item">	<div>	<img class="list-item-photo" src="http://www.fillmurray.com/50/50" alt="Bill murray" />	<div class="list-item-content">	<h1>Blah</h1>	<p>Test content</p>	</div>	</div>	</li>	<li class="list-moving-item">	<div>	<img class="list-item-photo" src="http://www.fillmurray.com/50/50" alt="Bill murray" />	<div class="list-item-content">	<h1>Blah</h1>	<p>Test content</p>	</div>	</div>	</li>	<li class="list-moving-item">	<div>	<img class="list-item-photo" src="http://www.fillmurray.com/50/50" alt="Bill murray" />	<div class="list-item-content">	<h1>Blah</h1>	<p>Test content</p>	</div>	</div>	</li>	</ul> </div> </div>
</main> <script src="js/index.js"></script>
</body>
</html>

Inertia CSS - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Nunito:400,300);
.list-moving-item > div:after, .list-moving-item:after { display: table; content: ""; clear: both;
}
body { background: #222; color: #fff; font: 300 100%/1.6 Nunito;
}
h1 { font: 300 1.8em/1.2 Nunito; margin: 0 0 1em 0; text-align: center;
}
.l-flex-column-one { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.l-flex-row-one { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.m-experiment { padding: 1em;
}
.m-experiment-navigation { margin: 0.5em auto;
}
.m-experiment-navigation li { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.m-frame { background: #000; height: 30em; overflow: hidden; position: relative; width: 30em;
}
.m-button-primary,
.m-button-secondary { border-radius: 3em; color: #000; display: block; margin: 1em; padding: 1em; text-align: center; text-decoration: none; -webkit-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out; width: 10em;
}
.m-button-primary { background: #f49c2c;
}
.m-button-primary:hover { background: #bb5224;
}
.m-button-secondary { background: #eee;
}
.m-button-secondary:hover { background-color: #ddd;
}
.list-moving { -webkit-transform: translateY(10em); transform: translateY(10em); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
#list-moving-up:target .list-moving { -webkit-transform: translateY(-2em); transform: translateY(-2em);
}
#list-moving-up:target .list-moving-item { -webkit-animation: motionBlurTextUp 0.7s 0.1s ease-in-out forwards; animation: motionBlurTextUp 0.7s 0.1s ease-in-out forwards;
}
#list-moving-up:target .list-moving-item > div { -webkit-animation: inertiaUp 0.7s 0.1s ease-in-out forwards; animation: inertiaUp 0.7s 0.1s ease-in-out forwards;
}
#list-moving-up:target .list-moving-item:after { -webkit-animation: bendy 1s forwards; animation: bendy 1s forwards;
}
#list-moving-up:target .list-moving-item:before { display: none;
}
#list-moving-down:target .list-moving { -webkit-transform: translateY(10em); transform: translateY(10em);
}
#list-moving-down:target .list-moving-item { -webkit-animation: motionBlurTextDown 0.7s 0.1s ease-in-out forwards; animation: motionBlurTextDown 0.7s 0.1s ease-in-out forwards;
}
#list-moving-down:target .list-item-inertia { -webkit-animation: inertiaDown 0.7s 0.1s ease-in-out forwards; animation: inertiaDown 0.7s 0.1s ease-in-out forwards;
}
#list-moving-down:target .list-moving-item:before { -webkit-animation: bendy 1s forwards; animation: bendy 1s forwards; display: block; visibility: visible;
}
#list-moving-down:target .list-moving-item:after { display: none; visibility: hidden;
}
.list-moving-item > div { height: 4em;
}
.list-moving-item { padding: 2em 0 2.5em 0; max-width: 40em; position: relative; z-index: 2; background-color: #c02942; display: block; list-style-type: none;
}
.list-moving-item:first-child:after { border: none;
}
.list-moving-item:before { display: none; bottom: 0; border-bottom: 3px solid #fff;
}
.list-moving-item:before,
.list-moving-item:after { position: absolute; z-index: 1; width: 100%; height: 7em; content: "";
}
.list-moving-item:after { bottom: 1em; border-top: 3px solid #fff;
}
.list-item-content { width: 15em; display: block; float: left; margin: 1em;
}
.list-item-content h1 { text-align: left; margin: 0;
}
.list-item-photo { margin: 1em 1em 1em 2em; float: left; display: block; border-radius: 50%;
}
@-webkit-keyframes motionBlurTextUp { 0% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { text-shadow: 0px 4px 4px white; } 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes motionBlurTextUp { 0% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { text-shadow: 0px 4px 4px white; } 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}
@-webkit-keyframes motionBlurTextDown { 0% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { text-shadow: 0px -4px 4px white; } 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes motionBlurTextDown { 0% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { text-shadow: 0px -4px 4px white; } 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}
@-webkit-keyframes bendy { 0% { border-radius: 0%; } 40% { border-radius: 50%; } 100% { border-radius: 0%; }
}
@keyframes bendy { 0% { border-radius: 0%; } 40% { border-radius: 50%; } 100% { border-radius: 0%; }
}
@-webkit-keyframes inertiaDown { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.2) translateY(-1em); transform: scaleY(1.2) translateY(-1em); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes inertiaDown { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.2) translateY(-1em); transform: scaleY(1.2) translateY(-1em); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@-webkit-keyframes inertiaUp { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.2) translateY(1em); transform: scaleY(1.2) translateY(1em); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes inertiaUp { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.2) translateY(1em); transform: scaleY(1.2) translateY(1em); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}

Inertia CSS - Script Codes JS Codes

//this was just an experiment to see if I could simulate a motion blurring and inertia effect with just CSS.
//this involves shadow for fake motion blur
//border radius animation to make it look like the line is bending
//and an elastic snap animation when it moves.

Home Page	Home
Developer	Chris Wright
Username	chriswrightdesign
Uploaded	July 12, 2022
Rating	3
Size	5,065 Kb
Views	40,480

Do you need developer help for Inertia CSS?

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!

Chris Wright (chriswrightdesign) Script Codes

Name	Size
CSS Responsive animated Accordion	4,834 Kb
Timeline animation	4,398 Kb
Grid - Auto-fit demo	3,128 Kb
IPhone SVG	3,490 Kb
SVG Shadows	3,657 Kb
Reverse cascade	3,976 Kb
Grid - Row with minmax	4,220 Kb
Bouncing ball arc horizontal	4,602 Kb
CSS line-height animated accordion pattern	7,059 Kb
Inverted shadow with fade	5,897 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
Retina canvas w. resize	Erikterwan	1,882 Kb
Form Labels	Bartuc	2,717 Kb
Coburg Banks SVG Logo	Mjtweaver	3,875 Kb
Lecture 1	Law	0 Kb
Count checked checkboxes with jQuery	Mestika	2,343 Kb
Subscription Newsletter - Before inlining	Bradstrong	7,526 Kb
Gradients	Karpovsystems	2,394 Kb
Ghost Buttons with CSS3	Mithicher	2,509 Kb
BabyStore	Pablo-Ai	3,807 Kb
Scarlett Johansson Tribute Page	Diomed	3,233 Kb

Do you want hide your ip address?

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!