#holder:hover mark { opacity: 1; } .switch m { transition: opacity 0.5s; opacity: 0; transition-delay: 2s; animation: duke 1.5s ease-in-out infinite; background: none; font-weight: bold; animation-delay: 3s; } @keyframes duke { 0% { color: #ff469a; } 100% { color: #000; } } #holder:hover .switch m { opacity: 1; } .switch m:nth-child(1) { animation-delay: 0.1s; display: inline-block; } .switch m:nth-child(2) { animation-delay: 0.2s; display: inline-block; } .switch m:nth-child(3) { animation-delay: 0.3s; display: inline-block; } .switch m:nth-child(4) { animation-delay: 0.4s; display: inline-block; } .switch m:nth-child(5) { animation-delay: 0.5s; display: inline-block; } .switch m:nth-child(6) { animation-delay: 0.6s; display: inline-block; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes rotating { 0% { transform: rotate(0); } 33% { transform: rotate(-20deg); } 66% { transform: rotate(20deg); } 100% { transform: rotate(0); } }
instagram
. . . twitter
. tellonym
To learn more HTML/CSS, check out these
tutorials
!
