CSS Only word rotator. Need to work on the positioning...
A Pen by Josh Mathis on CodePen.
<header><div class="wrapper"> | |
<h2>Welcome to AFISM Training.</h2> | |
<div class="spinny-wrapper"> | |
<h1>We make learning | |
<span class="spinny-words"> | |
<span>awesome</span> | |
<span>amazing</span> | |
<span>legendary</span> | |
<span>super duper</span> | |
<span>fantistic</span> | |
<span>fun</span> | |
</span> | |
</h1> | |
</div></div> | |
</header> |
CSS Only word rotator. Need to work on the positioning...
A Pen by Josh Mathis on CodePen.
*{ | |
font-size: 100%; | |
} | |
header{ | |
background: #00aeb9; | |
height: 50vh; | |
font-size: 3rem; | |
text-transform: uppercase; | |
font-family: sans-serif; | |
padding: 75px; | |
color:#fff; | |
display: flex; | |
width:100%; | |
align-items: center; | |
// justify-content:center; | |
h2{ | |
text-align: left; | |
font-size: 2rem; | |
// width:500px; | |
margin: 0 auto; | |
} | |
.spinny-wrapper{ | |
margin-top: 20px; | |
display: flex; | |
align-items: center; | |
justify-content: flex-start; | |
position: relative; | |
} | |
} | |
/*-------------------------------------------------- | |
-------------------- rotate words ------------------ | |
---------------------------------------------------*/ | |
.spinny-words{ | |
display: inline-block; | |
min-width: 350px; | |
text-align: left; | |
} | |
.spinny-words span{ | |
position: absolute; | |
font-weight: bold; | |
top:-0px; | |
opacity: 0; | |
animation: rotateWord 18s linear infinite 0s; | |
} | |
.spinny-words span:nth-child(2) { | |
animation-delay: 3s; | |
} | |
.spinny-words span:nth-child(3) { | |
animation-delay: 6s; | |
} | |
.spinny-words span:nth-child(4) { | |
animation-delay: 9s; | |
} | |
.spinny-words span:nth-child(5) { | |
animation-delay: 12s; | |
} | |
.spinny-words span:nth-child(6) { | |
animation-delay: 15s; | |
} | |
@keyframes rotateWord { | |
0% { opacity: 0; } | |
2% { opacity: 0; transform: translateY(-30px); } | |
5% { opacity: 1; transform: translateY(0px);} | |
17% { opacity: 1; transform: translateY(0px); } | |
20% { opacity: 0; transform: translateY(30px); } | |
80% { opacity: 0; } | |
100% { opacity: 0; } | |
} |