Timeline animation
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 - 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); }
}
Developer | Chris Wright |
Username | chriswrightdesign |
Uploaded | July 12, 2022 |
Rating | 4 |
Size | 4,398 Kb |
Views | 48,576 |
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 |
Macbook Air SVG | 11,283 Kb |
SVG Reflection | 8,859 Kb |
Bouncing ball arc horizontal | 4,602 Kb |
Flexbox responsive navigation | 4,272 Kb |
Reverse cascade | 3,976 Kb |
SVG iMac | 5,932 Kb |
Grid - Auto-fit demo | 3,128 Kb |
SVG Shadows | 3,657 Kb |
Typography SVG experiment | 3,472 Kb |
SVG Noise | 2,930 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 |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Lecture 1 | Law | 0 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!