A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.
A Pen by Erin E. Sullivan on CodePen.
DEMO https://codemyui.com/warm-cold-shadow-streak-jumping-text-animation/
A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.
A Pen by Erin E. Sullivan on CodePen.
DEMO https://codemyui.com/warm-cold-shadow-streak-jumping-text-animation/
<div id="wrapper"> | |
<div id="container"> | |
<h1>Lorem ipsum dolor sit amet.</h1> | |
<p>Hover over text to pause.</p> | |
<p><small>Inspired by <a href="https://dribbble.com/shots/3281814-Solitary-Saunter">Tomas Brunsdon</a>.</small></p> | |
</div> | |
</div> |
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,900,400italic,700italic,900italic); | |
*, | |
:before, | |
:after { | |
box-sizing: border-box; | |
} | |
body { | |
background-color: #fdf9fd; | |
color: #011a32; | |
font: 16px/1.25 'Raleway', sans-serif; | |
text-align: center; | |
} | |
#wrapper { | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 80em; | |
} | |
#container { | |
display: flex; | |
flex-direction: column; | |
float: left; | |
justify-content: center; | |
min-height: 100vh; | |
padding: 1em; | |
width: 100%; | |
} | |
h1 { | |
animation: text-shadow 1.5s ease-in-out infinite; | |
font-size: 5em; | |
font-weight: 900; | |
line-height: 1; | |
} | |
h1:hover { | |
animation-play-state: paused; | |
} | |
a { | |
color: #024794; | |
} | |
a:hover { | |
text-decoration: none; | |
} | |
@keyframes text-shadow { | |
0% { | |
transform: translateY(0); | |
text-shadow: | |
0 0 0 #0c2ffb, | |
0 0 0 #2cfcfd, | |
0 0 0 #fb203b, | |
0 0 0 #fefc4b; | |
} | |
20% { | |
transform: translateY(-1em); | |
text-shadow: | |
0 0.125em 0 #0c2ffb, | |
0 0.25em 0 #2cfcfd, | |
0 -0.125em 0 #fb203b, | |
0 -0.25em 0 #fefc4b; | |
} | |
40% { | |
transform: translateY(0.5em); | |
text-shadow: | |
0 -0.0625em 0 #0c2ffb, | |
0 -0.125em 0 #2cfcfd, | |
0 0.0625em 0 #fb203b, | |
0 0.125em 0 #fefc4b; | |
} | |
60% { | |
transform: translateY(-0.25em); | |
text-shadow: | |
0 0.03125em 0 #0c2ffb, | |
0 0.0625em 0 #2cfcfd, | |
0 -0.03125em 0 #fb203b, | |
0 -0.0625em 0 #fefc4b; | |
} | |
80% { | |
transform: translateY(0); | |
text-shadow: | |
0 0 0 #0c2ffb, | |
0 0 0 #2cfcfd, | |
0 0 0 #fb203b, | |
0 0 0 #fefc4b; | |
} | |
} | |
@media (prefers-reduced-motion: reduce) { | |
* { | |
animation: none !important; | |
transition: none !important; | |
} | |
} |