Labs Bubbling Animation
How do I make an labs bubbling animation?
What is a labs bubbling animation? How do you make a labs bubbling animation? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.
Labs Bubbling Animation Previews
Labs Bubbling Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Labs Bubbling Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg width="200px" height="290px" viewBox="0 0 145 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="tube"> <path d="M30.4995435,83.0004 L40.1663913,85.4909222 L2.21163043,232.179811 C-0.60373913,243.066678 0.994086957,254.387233 6.7111087,264.065511 C12.4345217,273.746978 21.5900652,280.622222 32.4936304,283.428444 L37.523587,284.729511 C41.0451957,285.638344 44.5763913,286.072033 48.0596522,286.072033 C66.8149348,286.072033 83.9787826,273.459978 88.8841087,254.5116 L126.83887,107.8259 L136.505717,110.3228 L142.603022,86.7664778 L36.5904565,59.4504556 L30.4995435,83.0004 Z M62.200413,91.1735222 L104.824022,102.152867 L100.493913,118.862644 L55.0293696,118.862644 L62.200413,91.1735222 Z M94.6266957,141.564344 L89.5136522,161.335456 L75.2898043,157.6778 L69.6047391,179.652433 L83.8221957,183.316467 L78.0668261,205.565344 L63.8493696,201.901311 L58.157913,223.875944 L72.3753696,227.546356 L66.8628696,248.848133 C64.1913043,259.186511 53.5817391,265.436733 43.2150435,262.761256 L38.1786957,261.457 C33.1615217,260.1655 28.9464565,256.998933 26.3132391,252.537678 C23.686413,248.085989 22.9418261,242.872156 24.2424565,237.859222 L49.1653478,141.561156 L94.6266957,141.561156 L94.6266957,141.564344 Z" id="base"></path> <ellipse id="bubble-one" cx="120.185522" cy="66.2778667" rx="5.58919565" ry="5.57736667"></ellipse> <path d="M92.9106304,41.4045333 C97.2247609,41.4045333 100.724,37.9158889 100.724,33.6077 C100.724,29.2931333 97.2215652,25.8076778 92.9106304,25.8076778 C88.5837174,25.8076778 85.0844783,29.2963222 85.0844783,33.6077 C85.0844783,37.9190778 88.5837174,41.4045333 92.9106304,41.4045333 L92.9106304,41.4045333 Z" id="bubble-two"></path> <ellipse id="bubble-three" cx="133.840543" cy="11.193" rx="10.29" ry="10.2682222"></ellipse> </g>
</svg>
</body>
</html>
Labs Bubbling Animation - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #f6f6f6; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
#tube { fill: #000000; -webkit-transform: rotate(6deg) translateY(60px); transform: rotate(6deg) translateY(60px); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: shake 1000ms linear; animation: shake 1000ms linear;
}
#bubble-one { -webkit-animation: bubbleOne 600ms linear infinite; animation: bubbleOne 600ms linear infinite;
}
#bubble-two { -webkit-animation: bubbleOne 750ms linear infinite; animation: bubbleOne 750ms linear infinite;
}
#bubble-three { -webkit-animation: bubbleThree 1100ms linear infinite; animation: bubbleThree 1100ms linear infinite;
}
@-webkit-keyframes bubbleOne { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 45% { opacity: 1; -webkit-transform: translate3d(15px, -25px, 0); transform: translate3d(15px, -25px, 0); } 90% { -webkit-transform: translate3d(-5px, -30px, 0); transform: translate3d(-5px, -30px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; }
}
@keyframes bubbleOne { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 45% { opacity: 1; -webkit-transform: translate3d(15px, -25px, 0); transform: translate3d(15px, -25px, 0); } 90% { -webkit-transform: translate3d(-5px, -30px, 0); transform: translate3d(-5px, -30px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; }
}
@-webkit-keyframes bubbleThree { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 45% { opacity: 1; -webkit-transform: translate3d(-10px, -35px, 0); transform: translate3d(-10px, -35px, 0); } 90% { -webkit-transform: translate3d(9px, -50px, 0); transform: translate3d(9px, -50px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; }
}
@keyframes bubbleThree { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 45% { opacity: 1; -webkit-transform: translate3d(-10px, -35px, 0); transform: translate3d(-10px, -35px, 0); } 90% { -webkit-transform: translate3d(9px, -50px, 0); transform: translate3d(9px, -50px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; }
}
@-webkit-keyframes shake { from, to { -webkit-transform: rotate(6deg) translateY(60px); transform: rotate(6deg) translateY(60px); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: rotate(2deg) translateY(60px); transform: rotate(2deg) translateY(60px); } 20%, 40%, 60%, 80% { -webkit-transform: rotate(6deg) translateY(60px); transform: rotate(6deg) translateY(60px); }
}
@keyframes shake { from, to { -webkit-transform: rotate(6deg) translateY(60px); transform: rotate(6deg) translateY(60px); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: rotate(2deg) translateY(60px); transform: rotate(2deg) translateY(60px); } 20%, 40%, 60%, 80% { -webkit-transform: rotate(6deg) translateY(60px); transform: rotate(6deg) translateY(60px); }
}
| Developer | Alex Pate |
| Username | alexpate |
| Uploaded | November 24, 2022 |
| Rating | 4 |
| Size | 3,414 Kb |
| Views | 22,264 |
Do you need developer help for Labs Bubbling 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!
Alex Pate (alexpate) Script Codes
| Name | Size |
| Whatthehack Pusher | 3,474 Kb |
| Single Element Stacked Paper | 2,072 Kb |
| Random HEX Color Generator | 2,925 Kb |
| Wobble Notification | 2,618 Kb |
| Pulse Animation - With Notifications | 2,617 Kb |
| Graph Preloader | 2,291 Kb |
| Notifier Pulse | 2,450 Kb |
| SVG Progress Circle JS | 5,122 Kb |
| CSS Colors | 2,232 Kb |
| Smock Gradient Button | 2,479 Kb |
Create amazing video scripts 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 |
| A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
| Pricing Table | Semenchenko | 6,784 Kb |
| How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
| A Pen by Matt Popovich | Mpopv | 3,349 Kb |
| Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
| Easing | GreenSock | 2,043 Kb |
| Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
| Portfolio page | Bhavya_j | 2,804 Kb |
| A Pen by Rob Levin | Roblevin | 2,787 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 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!