Created
December 16, 2016 21:44
-
-
Save ohsoren/c2c1958904208b351aedac13152c0289 to your computer and use it in GitHub Desktop.
pyramid-AnimatedListItem-v1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section> | |
| <div class="cas-Pyramid"> | |
| <div class="cas-Pyramid_Segment cas-Pyramid_Segment-gold"></div> | |
| <div class="cas-Pyramid_Segment cas-Pyramid_Segment-silver"></div> | |
| <div class="cas-Pyramid_Segment cas-Pyramid_Segment-bronze"></div> | |
| </div> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @use postcss-nested; | |
| @use postcss-simple-vars; | |
| @use cssnext; | |
| $pyramid-width: 400px; | |
| $pyramid-height: 285px; | |
| $pyramid-segment-height: 95px; | |
| .cas-Pyramid { | |
| position: relative; | |
| width: $pyramid-width; | |
| height: $pyramid-height; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2) )); | |
| &::after { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| border-color: transparent #333 transparent #333; | |
| border-width: 0px calc($pyramid-width/2) $pyramid-height calc($pyramid-width/2); | |
| border-style: solid; | |
| } | |
| } | |
| .cas-Pyramid_Segment { | |
| position: absolute; | |
| width: inherit; | |
| height: inherit; | |
| } | |
| .cas-Pyramid_Segment-gold { | |
| background: darkslateblue; | |
| animation: grow 1.5s ease-in-out; | |
| bottom: 0px; | |
| } | |
| .cas-Pyramid_Segment-silver { | |
| background: slateblue; | |
| animation: grow2 1.25s ease-in-out; | |
| height: calc($pyramid-segment-height*2); | |
| } | |
| .cas-Pyramid_Segment-bronze { | |
| background: slategrey; | |
| height: $pyramid-segment-height; | |
| opacity: 0; | |
| animation: grow3 .75s ease-out forwards .5s; | |
| } | |
| @keyframes grow { | |
| 0% { | |
| height: 0; | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| height: 100%; | |
| } | |
| } | |
| @keyframes grow2 { | |
| 0% { | |
| height: 0; | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| height: calc($pyramid-segment-height*2); | |
| } | |
| } | |
| @keyframes grow3 { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| body { | |
| width: 100vw; | |
| height: 100vh; | |
| background-color: #333; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment