Double Helix Animation - Jade and Sass

Developer
Tim
Size
2,497 Kb
Views
36,432
  1. Double Helix Animation - Jade and Sass Previews
  2. Double Helix Animation - Jade and Sass HTML Codes
  3. Double Helix Animation - Jade and Sass CSS Codes

How do I make an double helix animation - jade and sass?

Animation of double helix using just Jade and Sass.. What is a double helix animation - jade and sass? How do you make a double helix animation - jade and sass? This script and codes were developed by Tim on 31 October 2022, Monday.

Double Helix Animation - Jade and Sass Previews
IQ Test

Double Helix Animation - Jade and Sass - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Double Helix Animation - Jade and Sass</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="loader"> <div class="dot odd" style="animation-delay: 0ms; left: 0px"></div> <div class="dot even" style="animation-delay: 80ms; left: 0px"></div> <div class="dot odd" style="animation-delay: 160ms; left: 16px"></div> <div class="dot even" style="animation-delay: 240ms; left: 16px"></div> <div class="dot odd" style="animation-delay: 320ms; left: 32px"></div> <div class="dot even" style="animation-delay: 400ms; left: 32px"></div> <div class="dot odd" style="animation-delay: 480ms; left: 48px"></div> <div class="dot even" style="animation-delay: 560ms; left: 48px"></div> <div class="dot odd" style="animation-delay: 640ms; left: 64px"></div> <div class="dot even" style="animation-delay: 720ms; left: 64px"></div> <div class="dot odd" style="animation-delay: 800ms; left: 80px"></div> <div class="dot even" style="animation-delay: 880ms; left: 80px"></div> <div class="dot odd" style="animation-delay: 960ms; left: 96px"></div> <div class="dot even" style="animation-delay: 1040ms; left: 96px"></div> <div class="dot odd" style="animation-delay: 1120ms; left: 112px"></div> <div class="dot even" style="animation-delay: 1200ms; left: 112px"></div> <div class="dot odd" style="animation-delay: 1280ms; left: 128px"></div> <div class="dot even" style="animation-delay: 1360ms; left: 128px"></div> <div class="dot odd" style="animation-delay: 1440ms; left: 144px"></div> <div class="dot even" style="animation-delay: 1520ms; left: 144px"></div> <div class="dot odd" style="animation-delay: 1600ms; left: 160px"></div> <div class="dot even" style="animation-delay: 1680ms; left: 160px"></div> <div class="dot odd" style="animation-delay: 1760ms; left: 176px"></div> <div class="dot even" style="animation-delay: 1840ms; left: 176px"></div> <div class="dot odd" style="animation-delay: 1920ms; left: 192px"></div> <div class="dot even" style="animation-delay: 2000ms; left: 192px"></div>
</div>
</body>
</html>

Double Helix Animation - Jade and Sass - Script Codes CSS Codes

@keyframes evenMove { 0% { transform: translateY(48px) scale(0.5); z-index: 2; visibility: visible; } 50% { transform: translateY(0px) scale(1); z-index: 0; } 100% { transform: translateY(48px) scale(0.5); z-index: 2; }
}
@keyframes oddMove { 0% { transform: translateY(0px) scale(1); z-index: 0; visibility: visible; } 50% { transform: translateY(48px) scale(0.5); z-index: 2; } 100% { transform: translateY(0px) scale(1); z-index: 0; }
}
.dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; visibility: hidden;
}
.even { background-color: #49708A; transform: translateY(100px); animation: evenMove 2s ease-in-out infinite;
}
.odd { background-color: #88ABC2; animation: oddMove 2s ease-in-out infinite;
}
Double Helix Animation - Jade and Sass - Script Codes
Double Helix Animation - Jade and Sass - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 2,497 Kb
Views 36,432
Do you need developer help for Double Helix Animation - Jade and Sass?

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!

Tim (maytim) Script Codes
Name
Double Helix Animation - Jade and Sass
Reddit API Gifs
CSS Grid Calendar
Custom Dropdown
Javascript Spelling Game
Phaser.io First Game Tutorial
Phaser.io Sidescroller
A Pen by Tim
Pixel paint
IPhone Doodle
Create amazing captions 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!