Animate elements with fixed gradient

Developer
Jeremias Erbs
Size
4,406 Kb
Views
18,216
  1. Animate elements with fixed gradient Previews
  2. Animate elements with fixed gradient HTML Codes
  3. Animate elements with fixed gradient CSS Codes

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,216
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
Better jQuery event handler example
Image and text hover effect with filter and inline SVG
Small JMESpath test
CSS3 Columns Example
Working agreements
Simple icon element with any centered content
A Typing Lessons App
Simple page for beginners lessons.
Button with stripe shadow
Open and slide out content
Create amazing sales emails 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!