Animate elements with fixed gradient

Developer
Jeremias Erbs
Size
4,406 Kb
Views
18,207

How do I make an animate elements with fixed gradient?

A small animation that shows how to make a nice setup-animation with elements that have a fixed gradient background. What is a animate elements with fixed gradient? How do you make a animate elements with fixed gradient? This script and codes were developed by Jeremias Erbs on 09 December 2022, Friday.

Animate elements with fixed gradient Previews
IQ Test

Animate elements with fixed gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animate elements with fixed gradient</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 10px;
}
.container { height: 50px; position: relative; margin-bottom: 10px; overflow: hidden; width: 1000px;
}
.img { width: 40px; height: 40px; margin: 5px; background-color: white;
}
.gradient { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwOTNjZiIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjM2ZhZGM3Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM1YWI5YTkiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzgwYzM3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JhY2UwNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2093cf), color-stop(25%, #3fadc7), color-stop(50%, #5ab9a9), color-stop(75%, #80c371), color-stop(100%, #bace05)); background-image: -moz-linear-gradient(left, #2093cf, #3fadc7, #5ab9a9, #80c371, #bace05); background-image: -webkit-linear-gradient(left, #2093cf, #3fadc7, #5ab9a9, #80c371, #bace05); background-image: linear-gradient(to right, #2093cf, #3fadc7, #5ab9a9, #80c371, #bace05); background-size: 1000px;
}
.line { width: 1000px; height: 5px;
}
.block { background-attachment: fixed; height: 50px; position: absolute; width: 50px;
}
.block-0 { left: 800px; animation: show-gradient-block 4s ease-out;
}
.block-1 { left: 720px; animation: show-gradient-block 4.1s ease-out;
}
.block-2 { left: 640px; animation: show-gradient-block 4.2s ease-out;
}
.block-3 { left: 560px; animation: show-gradient-block 4.3s ease-out;
}
.block-4 { left: 480px; animation: show-gradient-block 4.4s ease-out;
}
.block-5 { left: 400px; animation: show-gradient-block 4.5s ease-out;
}
.block-6 { left: 320px; animation: show-gradient-block 4.6s ease-out;
}
.block-7 { left: 240px; animation: show-gradient-block 4.7s ease-out;
}
.block-8 { left: 160px; animation: show-gradient-block 4.8s ease-out;
}
.block-9 { left: 80px; animation: show-gradient-block 4.9s ease-out;
}
@keyframes show-gradient-block { 0%, 50% { opacity: 1; margin-left: -1000px; } 100% { opacity: 1; margin-left: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1> Fixed-gradient block animation
</h1>
<div class="container"> <div class="gradient block block-0"> <div class="img"></div> </div> <div class="gradient block block-1"> <div class="img"></div> </div> <div class="gradient block block-2"> <div class="img"></div> </div> <div class="gradient block block-3"> <div class="img"></div> </div> <div class="gradient block block-4"> <div class="img"></div> </div> <div class="gradient block block-5"> <div class="img"></div> </div> <div class="gradient block block-6"> <div class="img"></div> </div> <div class="gradient block block-7"> <div class="img"></div> </div> <div class="gradient block block-8"> <div class="img"></div> </div> <div class="gradient block block-9"> <div class="img"></div> </div>
</div>
<div class="gradient line"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Animate elements with fixed gradient - Script Codes CSS Codes

body { padding: 10px;
}
.container { height: 50px; position: relative; margin-bottom: 10px; overflow: hidden; width: 1000px;
}
.img { width: 40px; height: 40px; margin: 5px; background-color: white;
}
.gradient { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwOTNjZiIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjM2ZhZGM3Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM1YWI5YTkiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzgwYzM3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JhY2UwNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2093cf), color-stop(25%, #3fadc7), color-stop(50%, #5ab9a9), color-stop(75%, #80c371), color-stop(100%, #bace05)); background-image: -moz-linear-gradient(left, #2093cf, #3fadc7, #5ab9a9, #80c371, #bace05); background-image: -webkit-linear-gradient(left, #2093cf, #3fadc7, #5ab9a9, #80c371, #bace05); background-image: linear-gradient(to right, #2093cf, #3fadc7, #5ab9a9, #80c371, #bace05); background-size: 1000px;
}
.line { width: 1000px; height: 5px;
}
.block { background-attachment: fixed; height: 50px; position: absolute; width: 50px;
}
.block-0 { left: 800px; animation: show-gradient-block 4s ease-out;
}
.block-1 { left: 720px; animation: show-gradient-block 4.1s ease-out;
}
.block-2 { left: 640px; animation: show-gradient-block 4.2s ease-out;
}
.block-3 { left: 560px; animation: show-gradient-block 4.3s ease-out;
}
.block-4 { left: 480px; animation: show-gradient-block 4.4s ease-out;
}
.block-5 { left: 400px; animation: show-gradient-block 4.5s ease-out;
}
.block-6 { left: 320px; animation: show-gradient-block 4.6s ease-out;
}
.block-7 { left: 240px; animation: show-gradient-block 4.7s ease-out;
}
.block-8 { left: 160px; animation: show-gradient-block 4.8s ease-out;
}
.block-9 { left: 80px; animation: show-gradient-block 4.9s ease-out;
}
@keyframes show-gradient-block { 0%, 50% { opacity: 1; margin-left: -1000px; } 100% { opacity: 1; margin-left: 0; }
}
Animate elements with fixed gradient - Script Codes
Animate elements with fixed gradient - Script Codes
Home Page Home
Developer Jeremias Erbs
Username badabam
Uploaded December 09, 2022
Rating 3
Size 4,406 Kb
Views 18,207
Do you need developer help for Animate elements with fixed gradient?

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!

Jeremias Erbs (badabam) Script Codes
Name
A Typing Lessons App
Animate SVG Smiley with AngularJS
Open and slide out content
Angular Dropdown Directive
Simple page for beginners lessons.
Better jQuery event handler example
Button with stripe shadow
Circle through values in array
CSS3 Columns Example
JS prototypical inheritance test
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!