Found this beautiful animation by Krish Gounder, and I wanted to recreate it in CSS.
A Pen by Tom Bremer on CodePen.
<figure class="animation"> | |
<section class="animation__block" role="img" aria-label="Animation of the sun rising very quickly"> | |
<div class="hill front red-dk"></div> | |
<div class="hill back red"></div> | |
<div class="sun"></div> | |
</section> | |
<figcaption class="animation__caption"> | |
inspired by <a href="https://dribbble.com/shots/2271207-Wallpaper-Icon-Animation" target="_blank">@krishgounder</a> | |
</figcaption> | |
</figure> |
$orange: #ffb63c; | |
$sun: ( | |
0: #ffdb41, | |
1: #ffb63c, | |
2: #ffa638, | |
3: #ff963c, | |
4: #ff823c, | |
5: #ff6d3c | |
); | |
$red: #e3413c; | |
$red-dk: #cb3838; | |
$grey: #d4d1d0; | |
$grey-dk: #b1acac; | |
$black: #131313; | |
$cubic-bezier: cubic-bezier(0.680, -0.550, 0.265, 1.550); | |
*, | |
*::before, | |
*::after { box-sizing: border-box; } | |
body , | |
html { | |
margin: 0; | |
padding: 0; | |
background-color: $grey; | |
font-family: 'Courier New', monospace; | |
} | |
.animation { | |
&__block { | |
position: relative; | |
background-color: $grey-dk; | |
min-width: 280px; | |
min-height: 280px; | |
width: 25vw; | |
height: 25vw; | |
border-radius: 3vw; | |
box-shadow: 0 .3vw .6vw -.3vw rgba($black, .75); | |
margin: 4vw auto 0; | |
z-index: 1; | |
overflow: hidden; | |
} | |
&__caption { | |
font-size: .75rem; | |
width: 250px; | |
margin: 10px auto 0; | |
text-align: right; | |
} | |
} | |
.hill, | |
.sun { | |
animation: { | |
duration: 4s; | |
play-state: fill; | |
iteration-count: infinite; | |
timing-function: $cubic-bezier; | |
} | |
} | |
.hill { | |
position: absolute; | |
top: 100%; | |
height: 150%; | |
border-radius: 50%; | |
z-index: 2; | |
&.red-dk { | |
left: -75%; | |
width: 150%; | |
background-color: $red-dk; | |
box-shadow: inset 0 0 0 2px rgba(lighten($red-dk, 30%), .091); | |
animation-name: rise-red-dk; | |
} | |
&.red { | |
left: -30%; | |
width: 250%; | |
background-color: $red; | |
box-shadow: inset 0 0 0 2px rgba(lighten($red, 30%), .091); | |
animation-name: rise-red; | |
} | |
} | |
.sun { | |
position: absolute; | |
left: -20%; | |
top: 100%; | |
width: 20%; | |
height: 20%; | |
background-color: map-get($sun, 0); | |
border-radius: 50%; | |
transform: scale(0); | |
animation-name: sun; | |
} | |
/** | |
* HILL ANIMATIONS | |
*/ | |
@keyframes rise-red-dk { | |
17%, 73% { transform: translateY(-30%); } | |
} | |
@keyframes rise-red { | |
23%, 80% { transform: translateY(-20%); } | |
} | |
/** | |
* SUN ANIMATION | |
*/ | |
@keyframes sun { | |
0%, 10% { | |
transform: scale(.1); | |
} | |
20% { | |
transform: translate(400%, -400%) scale(1); | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091); | |
} | |
25% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091); | |
} | |
26% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
long-shadow(90, 0, transparent), | |
0 0 0 35px map-get($sun, 1); | |
} | |
27% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2); | |
} | |
28% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2), | |
0 0 0 105px map-get($sun, 3); | |
} | |
29% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2), | |
0 0 0 105px map-get($sun, 3), | |
0 0 0 140px map-get($sun, 4); | |
} | |
30% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2), | |
0 0 0 105px map-get($sun, 3), | |
0 0 0 140px map-get($sun, 4), | |
0 0 0 175px map-get($sun, 5); | |
} | |
31% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2), | |
0 0 0 105px map-get($sun, 3), | |
0 0 0 140px map-get($sun, 4), | |
0 0 0 175px map-get($sun, 5), | |
0 0 0 210px $red; | |
} | |
32% { | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2), | |
0 0 0 105px map-get($sun, 3), | |
0 0 0 140px map-get($sun, 4), | |
0 0 0 175px map-get($sun, 5), | |
0 0 0 210px $red, | |
0 0 0 250px $red-dk; | |
} | |
70% { | |
transform: translate(400%, -400%) scale(1); | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
long-shadow(10, 0, map-get($sun, 0)), | |
0 0 0 35px map-get($sun, 1), | |
0 0 0 70px map-get($sun, 2), | |
0 0 0 105px map-get($sun, 3), | |
0 0 0 140px map-get($sun, 4), | |
0 0 0 175px map-get($sun, 5), | |
0 0 0 210px $red, | |
0 0 0 250px $red-dk; | |
} | |
85% { | |
transform: translate(800%, 200%) scale(1); | |
box-shadow: inset 0 0 0 2px rgba(lighten(map-get($sun, 0), 30%), .091), | |
long-shadow(10, 0, map-get($sun, 0)), | |
0 0 0 10px map-get($sun, 1), | |
0 0 0 20px map-get($sun, 2), | |
0 0 0 35px map-get($sun, 3), | |
0 0 0 40px map-get($sun, 4), | |
0 0 0 50px map-get($sun, 5), | |
0 0 0 60px $red, | |
0 0 0 70px $red-dk; | |
} | |
90% { transform: translate(800%, 200%) scale(0); } | |
} | |
a { | |
display: inline-block; | |
vertical-align: middle; | |
color: $black; | |
text-decoration: none; | |
font-weight: bold; | |
border-bottom: 1px solid transparent; | |
&:hover { | |
border-bottom: 1px solid map-get($sun, 4); | |
} | |
} |
Found this beautiful animation by Krish Gounder, and I wanted to recreate it in CSS.
A Pen by Tom Bremer on CodePen.