Timeline animation

Developer
Size
4,398 Kb
Views
48,576

How do I make an timeline animation?

Just messing around with a simple animated timeline. What is a timeline animation? How do you make a timeline animation? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Timeline animation Previews

Timeline animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline animation</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> <section class="block-content t-block-teal l-block-spacing">	<div class="l-contained">	<header class="heading-group">	<h2>Timeline</h2>	<p class="subtitle">	What is this?	</p>	</header>	<ul class="timeline-list">	<li> <div class="content">	<h3>A timeline?</h3>	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.	</p> </div>	</li>	<li> <div class="content">	<h3>A railway map?</h3>	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.	</p> </div>	</li>	<li> <div class="content">	<h3>Random dots?</h3>	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.	</p> </div>	</li>	<li> <div class="content">	<h3>Absolutely nothing.</h3>	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam felis, rutrum nec enim non, sodales facilisis purus. Vestibulum viverra egestas ipsum eget commodo. Nullam aliquet lorem vitae nulla dictum vestibulum sed quis tellus. Sed diam diam, facilisis tincidunt volutpat nec, auctor quis magna. Proin sed nunc iaculis ipsum scelerisque tincidunt. Cras eleifend leo tellus, fermentum finibus tortor fringilla eu.	</p> </div>	</li>	</ul>	</div>	</section>
</body>
</html>

Timeline animation - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700,900);
body { font-size: 100%; line-height: 1.6;
}
.block-content { min-height: 100vh;
}
block-content p { font-size: 1.1em; line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0 auto 1em auto;
}
.block-content h2 { text-align: center; margin: 1em 0 0 0; font-size: 2.5em; line-height: 1; letter-spacing: 0.02em;
}
@media all and (min-width: 40em) { .block-content h2 { font-size: 4.75em; }
}
.subtitle { font-family: "Merriweather", sans-serif; font-weight: 300; text-transform: uppercase; text-align: center; font-size: 1em; margin: 0.5em 0;
}
.heading-group { margin: 0 0 3em 0;
}
.content h3 { font-size: 1.2em; line-height: 1.2; letter-spacing: 0.02em; color: #fff;
}
@media all and (min-width: 40em) { .content h3 { font-size: 2.5em; }
}
h1, h2, h3 { font-family: "Merriweather", sans-serif; font-weight: 900;
}
p { font-family: "Merriweather", sans-serif; line-height: 1.5;
}
.l-block-spacing { min-height: 80vh; padding: 2em 0 4em 0;
}
.l-contained { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em;
}
@media all and (min-width: 40em) { .l-contained { padding-left: 2em; padding-right: 2em; }
}
.timeline-list { padding-bottom: 1em; position: relative; max-width: 700px; margin: 0 auto;
}
.timeline-list:before { content: ""; border-left: 5px solid #CCC; left: -0.25em; top: 2em; height: 100%; position: absolute; bottom: 0; top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: scaleVertical 3s 1s ease both 1; animation: scaleVertical 3s 1s ease both 1;
}
.timeline-list:after { content: ""; clear: both; position: absolute; bottom: 0px; left: -1em; width: 20px; height: 20px; border-radius: 50%; background: none repeat scroll 0% 0% #DDD; border: 5px solid #DDD; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -webkit-animation: revealScaleUp 0.75s 2.82s ease both 1; animation: revealScaleUp 0.75s 2.82s ease both 1;
}
.t-block-teal { background: #02aa9d;
}
.t-block-teal h2 { color: #fff;
}
.t-block-teal h3 { color: #034944;
}
.t-block-teal p { color: #034944;
}
.timeline-list li { margin: 0 0 3em 0; padding: 0 2em 0em 2em; position: relative;
}
.timeline-list li:before { content: ""; position: absolute; top: 0px; left: -1.45em; width: 30px; height: 30px; border-radius: 50%; background: none repeat scroll 0% 0% #02aa9d; border: 5px solid #fff; -webkit-animation: revealScaleUp 0.75s 0s ease both 1; animation: revealScaleUp 0.75s 0s ease both 1;
}
.timeline-list { -webkit-animation: reveal 2s 0 ease both 1; animation: reveal 2s 0 ease both 1;
}
.timeline-list li .content { -webkit-animation: revealFromLeft 0.5s 0s ease both 1; animation: revealFromLeft 0.5s 0s ease both 1;
}
.timeline-list li:nth-child(1):before { -webkit-animation-delay: 0.85s; animation-delay: 0.85s;
}
.timeline-list li:nth-child(1) .content { -webkit-animation-delay: 1.05s; animation-delay: 1.05s;
}
.timeline-list li:nth-child(2):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
.timeline-list li:nth-child(2) .content { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.timeline-list li:nth-child(3):before { -webkit-animation-delay: 1.8s; animation-delay: 1.8s;
}
.timeline-list li:nth-child(3) .content { -webkit-animation-delay: 2.1s; animation-delay: 2.1s;
}
.timeline-list li:nth-child(4):before { -webkit-animation-delay: 2s; animation-delay: 2s;
}
.timeline-list li:nth-child(4) .content { -webkit-animation-delay: 2.3s; animation-delay: 2.3s;
}
@-webkit-keyframes revealFromLeft { 0% { -webkit-transform: translateX(-1em); transform: translateX(-1em); opacity: 0; } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes revealFromLeft { 0% { -webkit-transform: translateX(-1em); transform: translateX(-1em); opacity: 0; } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes reveal { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes reveal { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes scaleVertical { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes scaleVertical { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@-webkit-keyframes revealScaleUp { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { opacity: 1; -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes revealScaleUp { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 50% { opacity: 1; -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
Timeline animation - Script Codes
Timeline animation - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 4
Size 4,398 Kb
Views 48,576
Do you need developer help for Timeline 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!

Chris Wright (chriswrightdesign) Script Codes
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!