DNA Helix

<div class="dna-helix">
    <div class="dna-strand"></div>
    <div class="dna-strand"></div>
</div>

.dna-helix {
    width: 100px;
    height: 200px;
    position: relative;
    animation: rotateDNA 4s linear infinite;
}

.dna-strand {
    position: absolute;
    width: 100%;
    height: 100%;
}

.dna-strand::before,
.dna-strand::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #4ecdc4;
    border-radius: 50%;
    box-shadow: 0 0 10px #4ecdc4;
}

.dna-strand::before {
    left: 0;
    animation: moveStrand1 2s ease-in-out infinite;
}

.dna-strand::after {
    right: 0;
    animation: moveStrand2 2s ease-in-out infinite;
}

.dna-strand:nth-child(2)::before,
.dna-strand:nth-child(2)::after {
    background: #ff6b6b;
    box-shadow: 0 0 10px #ff6b6b;
    animation-delay: 1s;
}

@keyframes rotateDNA {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

@keyframes moveStrand1 {
    0%, 100% { top: 0; }
    50% { top: 100%; }
}

@keyframes moveStrand2 {
    0%, 100% { top: 100%; }
    50% { top: 0; }
}