CSS animation "Heating"
How do I make an css animation "heating"?
What is a css animation "heating"? How do you make a css animation "heating"? This script and codes were developed by Ivan on 07 September 2022, Wednesday.
CSS animation "Heating" Previews
CSS animation "Heating" - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS animation "Heating"</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="heat first"></div>
<div class="heat two"></div>
<div class="heat three"></div>
<div class="heat four"></div>
<div class="heat five"></div>
<div class="battery-line battery"></div>
<div class="battery-1 battery"></div>
<div class="battery-2 battery"></div>
<div class="battery-3 battery"></div>
<div class="battery-4 battery"></div>
<div class="battery-5 battery"></div>
</body>
</html>
CSS animation "Heating" - Script Codes CSS Codes
body { background: #34495e;
}
.heat { position: absolute; height: 20px; width: 20px; border: solid #e74c3c; border-width: 5px; border-radius: 0 0 30% 100%; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
}
.heat::after { content: ""; height: 20px; width: 20px; border: 5px solid #e74c3c; margin: 33% 0 0 -94%; position: absolute; border-radius: 0 0 30% 100%; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
}
.first { margin: 100px 0 0 110px; -webkit-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -moz-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -ms-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -o-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; animation: heatup 1.5s linear infinite, heatmove 3s linear infinite;
}
.two { margin: 75px 0 0 155px; -webkit-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; -moz-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; -ms-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; -o-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite;
}
.three { margin: 100px 0 0 200px; -webkit-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -moz-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -ms-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -o-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; animation: heatup 1.5s linear infinite, heatmove 3s linear infinite;
}
.four { margin: 75px 0 0 245px; -webkit-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; -moz-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; -ms-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; -o-animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite; animation: heatup 1.5s linear -.5s infinite, heatmove 3s linear -.5s infinite;
}
.five { margin: 100px 0 0 290px; -webkit-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -moz-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -ms-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; -o-animation: heatup 1.5s linear infinite, heatmove 3s linear infinite; animation: heatup 1.5s linear infinite, heatmove 3s linear infinite;
}
@keyframes "heatup" { 0% { top: 20%; -webkit-opacity: 0; } 25% { -webkit-opacity: .8; } 50% { -webkit-opacity: 1; } 75% { -webkit-opacity: .8; } 100% { top: -15%; -webkit-opacity: 0; }
}
@-moz-keyframes heatup { 0% { top: 20%; } 25% { } 50% { } 75% { } 100% { top: -15%; }
}
@-webkit-keyframes "heatup" { 0% { top: 20%; -webkit-opacity: 0; } 25% { -webkit-opacity: .8; } 50% { -webkit-opacity: 1; } 75% { -webkit-opacity: .8; } 100% { top: -15%; -webkit-opacity: 0; }
}
@-ms-keyframes "heatup" { 0% { top: 20%; } 25% { } 50% { } 75% { } 100% { top: -15%; }
}
@-o-keyframes "heatup" { 0% { top: 20%; } 25% { } 50% { } 75% { } 100% { top: -15%; }
}
@keyframes "heatmove" { 0% { left: -5px; } 25% { left: 5px; } 50% { left: -5px; } 75% { left: 5px; } 100% { left: -5px; }
}
@-moz-keyframes heatmove { 0% { left: -5px; } 25% { left: 5px; } 50% { left: -5px; } 75% { left: 5px; } 100% { left: -5px; }
}
@-webkit-keyframes "heatmove" { 0% { left: -5px; } 25% { left: 5px; } 50% { left: -5px; } 75% { left: 5px; } 100% { left: -5px; }
}
@-ms-keyframes "heatmove" { 0% { left: -5px; } 25% { left: 5px; } 50% { left: -5px; } 75% { left: 5px; } 100% { left: -5px; }
}
@-o-keyframes "heatmove" { 0% { left: -5px; } 25% { left: 5px; } 50% { left: -5px; } 75% { left: 5px; } 100% { left: -5px; }
}
.battery { background: #2980b9; position: absolute; -webkit-animation: redbattery 2s infinite; -moz-animation: redbattery 2s infinite; -ms-animation: redbattery 2s infinite; -o-animation: redbattery 2s infinite; animation: redbattery 2s infinite;
}
.battery-line { height: 16px; width: 230px; margin: 237px 0 0 85px;
}
.battery-1,.battery-2,.battery-3,.battery-4,.battery-5 { width: 30px; height: 180px;
}
.battery-1 { margin: 220px 0 0 95px;
}
.battery-2 { margin: 220px 0 0 140px;
}
.battery-3 { margin: 220px 0 0 185px;
}
.battery-4 { margin: 220px 0 0 230px;
}
.battery-5 { margin: 220px 0 0 275px;
}
@keyframes "redbattery" { 0% { }50% { background: rgba(0,61,150,.5), rgba(255,0,51,.5); } 100% { } }
@-moz-keyframes redbattery { 0% { }50% { background: rgba(0,61,150,.5), rgba(255,0,51,.5); } 100% { } }
@-webkit-keyframes "redbattery" { 0% { }50% { background: rgba(0,61,150,.5), rgba(255,0,51,.5); } 100% { } }
@-ms-keyframes "redbattery" { 0% { }50% { background: rgba(0,61,150,.5), rgba(255,0,51,.5); } 100% { } }
@-o-keyframes "redbattery" { 0% { }50% { background: rgba(0,61,150,.5), rgba(255,0,51,.5); } 100% { } }
| Developer | Ivan |
| Username | Vany |
| Uploaded | September 07, 2022 |
| Rating | 3 |
| Size | 2,157 Kb |
| Views | 54,648 |
Do you need developer help for CSS animation "Heating"?
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!
Ivan (Vany) Script Codes
| Name | Size |
| A Pen by Ivan | 1,982 Kb |
| Snow | 1,443 Kb |
| The test for determining visual px | 1,896 Kb |
| Simple js slider | 2,954 Kb |
| Card | 2,541 Kb |
| CSS3 Animated loading icon | 3,148 Kb |
| Simple loader | 1,530 Kb |
| HTML Semantics | 1,868 Kb |
| Footer scroll effect | 1,748 Kb |
Create amazing art & images 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 |
| Degree Picker | Idered | 4,307 Kb |
| Main page display | BarryKe | 4,562 Kb |
| Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
| Zip Button test | Lje7462 | 1,932 Kb |
| Css3 loader | Clknap | 2,391 Kb |
| Materializecss input form | Jasonchan | 1,443 Kb |
| Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
| A Pen by Anoop | Anoopjohn | 330,760 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!