Hi all, today I am sharing with you a very attractive Stacked Animated UI Level using CSS. Here you will get a multilayer structure on which when you click on arrow button UI Levels will switch or interchange their postion. It is a pure css Fluent UI Card Animation.
Before going any brief about this I will let you know our most popular article quick view which is Material Design Sign Up Form and Styling elements based on sibling count, hope you will like it too.
It is a fluent design Inpired stacking different Structure with Each Other which is designed in pure css. As you know when you click on arrow icon bottom and top layer will switch their postion, top card will go bottom and bottom card will be on top. This process is repeatable on each click on arrow button.
This layer switching animation being done with only css by using hidden input to perform active and non-active layer by help of :pseudo code.
Lets start with the code as given below:
Markup structure (HTML):
<div class="container">
<input type="radio" class="is-hidden" id="component@profile-card-radio-1" name="profile-card-radio-group" />
<section class="component@profile-card" id="component@profile-card-1">
<header class="component@profile-card__header">
<label for="component@profile-card-radio-1" class="component@profile-card__link object@sticker"><img src="svg/next.svg" class="svg-icon"></label>
<div class="object@sticker component@profile-card__link">
<img src="svg/shopping-bag.svg" class="svg-icon">
</div>
<div class="object@sticker component@profile-card__link">
<img src="svg/startup.svg" class="svg-icon">
</div>
</header>
<article class="component@profile-card__body">
<h2 class="component@profile-card__title">Messages</h2>
<div class="object@media-object">
<img src="http://lorempixel.com/48/48/people/" class="object@media-object__img" />
<div class="object@media-object__body">
<h4 class="object@media-object__heading">Css Animation</h4>
<h5 class="object@media-object__subheading">January 23rd, 2017</h5>
<p class="object@media-object__text">Lorem ipsum dolor sit amet, diceret sensibus percipitur at duo, sit cu dolore scaevola efficiantur.</p>
</div>
</div>
<div class="object@media-object">
<img src="http://lorempixel.com/48/48/people/" class="object@media-object__img" />
<div class="object@media-object__body">
<h4 class="object@media-object__heading">Transform Effect</h4>
<h5 class="object@media-object__subheading">January 23rd, 2017</h5>
<p class="object@media-object__text">Lorem ipsum dolor sit amet, diceret sensibus percipitur at duo, sit cu dolore scaevola efficiantur.</p>
</div>
</div>
</article>
<div class="component@profile-card__blur"></div>
</section>
<input type="radio" class="is-hidden" id="component@profile-card-radio-2" name="profile-card-radio-group" checked />
<section class="component@profile-card" id="component@profile-card-2">
<header class="component@profile-card__header">
<label for="component@profile-card-radio-2" class="component@profile-card__link object@sticker"><img src="svg/next.svg" class="svg-icon"></label>
<div class="object@sticker component@profile-card__link">
<img src="svg/refresh.svg" class="svg-icon">
</div>
<div class="object@sticker component@profile-card__link">
<img src="svg/computer.svg" class="svg-icon">
</div>
</header>
<article class="component@profile-card__body">
<h2 class="component@profile-card__title">Checkout</h2>
<p class="helper@margin-top--none">Complete checkout?</p>
</article>
<div class="component@profile-card__blur"></div>
</section>
</div>
CSS Code For Animation:
.component\@profile-card {
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
box-shadow: 8px 10px 66px 1px rgba(0, 0, 0, 0.2), -1px -1px 0px 1px white, -1px -1px 0px 1px white, inset 2px 0px 0px white;
position: relative;
height: 400px;
width: 100%;
z-index: 1;
}
@media (min-width: 480px) {
.component\@profile-card {
width: 460px;
}
}
.component\@profile-card__blur {
background: url("http://lorempixel.com/1200/1200/nature/3") no-repeat center center fixed;
background-size: cover;
filter: blur(13px);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.component\@profile-card__header {
background: rgba(255, 255, 255, 0.7);
width: 90px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
}
.component\@profile-card__body {
background: rgba(247, 247, 247, 0.6);
display: flex;
flex-grow: 1;
flex-shrink: 0;
flex-direction: column;
padding: 0 24px 24px 114px;
z-index: 1;
}
.component\@profile-card__title {
letter-spacing: 2px;
margin-bottom: 36px;
}
.component\@profile-card__link {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100%;
transition: ease 0.2s background;
z-index: 2;
}
.component\@profile-card__link:hover {
background: #d1d1d1;
}
.component\@profile-card__img {
margin: 0 auto;
}
.object\@sticker {
position: relative;
}
.object\@sticker__item {
color: #303030;
font-size: 36px;
display: flex;
justify-content: center;
background-clip: text;
}
.object\@media-object {
margin-top: 24px;
display: flex;
align-items: flex-start;
}
.object\@media-object:first-of-type {
margin-top: 0;
}
.object\@media-object__img {
margin-right: 1em;
}
.object\@media-object__body {
flex: 1;
}
.object\@media-object__heading {
margin: 0;
}
.object\@media-object__subheading {
color: #666;
font-size: 12px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 6px;
}
.object\@media-object__text {
margin: 0;
font-weight: 200;
}
.helper\@margin-top--none {
margin-top: 0;
}
#component\@profile-card-radio-2 {
transition: ease all 1s;
}
#component\@profile-card-radio-2:checked ~ #component\@profile-card-2 {
position: absolute;
left: 50px;
top: 24px;
opacity: 0.6;
transition: ease top 1s, ease opacity 1s;
transition-delay: 2s;
transform: scale(1);
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
z-index: 0;
animation: primary 0.5s ease;
}
#component\@profile-card-radio-2:checked ~ #component\@profile-card-1 {
top: 0;
}
#component\@profile-card-radio-1 {
transition: ease all 1s;
}
#component\@profile-card-radio-1:checked ~ #component\@profile-card-1 {
position: absolute;
left: 50px;
top: 24px;
opacity: 0.6;
transition: ease top 1s, ease opacity 1s;
transition-delay: 2s;
transform: scale(1);
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
z-index: 0;
animation: primary 0.5s ease;
}
#component\@profile-card-radio-1:checked ~ #component\@profile-card-2 {
top: 0;
}
@keyframes primary {
0% {
position: absolute;
top: 0;
left: 0px;
z-index: 2;
}
1% {
position: absolute;
left: 9.5px;
z-index: 2;
}
2% {
position: absolute;
left: 19px;
z-index: 2;
}
3% {
position: absolute;
left: 28.5px;
z-index: 2;
}
4% {
position: absolute;
left: 38px;
z-index: 2;
}
5% {
position: absolute;
left: 47.5px;
z-index: 2;
}
6% {
position: absolute;
left: 57px;
z-index: 2;
}
7% {
position: absolute;
left: 66.5px;
z-index: 2;
}
8% {
position: absolute;
left: 76px;
z-index: 2;
}
9% {
position: absolute;
left: 85.5px;
z-index: 2;
}
10% {
position: absolute;
left: 95px;
z-index: 2;
}
11% {
position: absolute;
left: 104.5px;
z-index: 2;
}
12% {
position: absolute;
left: 114px;
z-index: 2;
}
13% {
position: absolute;
left: 123.5px;
z-index: 2;
}
14% {
position: absolute;
left: 133px;
z-index: 2;
}
15% {
position: absolute;
left: 142.5px;
z-index: 2;
}
16% {
position: absolute;
left: 152px;
z-index: 2;
}
17% {
position: absolute;
left: 161.5px;
z-index: 2;
}
18% {
position: absolute;
left: 171px;
z-index: 2;
}
19% {
position: absolute;
left: 180.5px;
z-index: 2;
}
20% {
position: absolute;
left: 190px;
z-index: 2;
}
21% {
position: absolute;
left: 199.5px;
z-index: 2;
}
22% {
position: absolute;
left: 209px;
z-index: 2;
}
23% {
position: absolute;
left: 218.5px;
z-index: 2;
}
24% {
position: absolute;
top: 24;
left: 228px;
z-index: 2;
}
25% {
position: absolute;
left: 237.5px;
z-index: 2;
}
26% {
position: absolute;
left: 247px;
z-index: 2;
}
27% {
position: absolute;
left: 256.5px;
z-index: 2;
}
28% {
position: absolute;
left: 266px;
z-index: 2;
}
29% {
position: absolute;
left: 275.5px;
z-index: 2;
}
30% {
position: absolute;
left: 285px;
z-index: 2;
}
31% {
position: absolute;
left: 294.5px;
z-index: 2;
}
32% {
position: absolute;
left: 304px;
z-index: 2;
}
33% {
position: absolute;
left: 313.5px;
z-index: 2;
}
34% {
position: absolute;
left: 323px;
z-index: 2;
}
35% {
position: absolute;
left: 332.5px;
z-index: 2;
}
36% {
position: absolute;
left: 342px;
z-index: 2;
}
37% {
position: absolute;
left: 351.5px;
z-index: 2;
}
38% {
position: absolute;
left: 361px;
z-index: 2;
}
39% {
position: absolute;
left: 370.5px;
z-index: 2;
}
40% {
position: absolute;
left: 380px;
z-index: 2;
}
41% {
position: absolute;
left: 389.5px;
z-index: 2;
}
42% {
position: absolute;
left: 399px;
z-index: 2;
}
43% {
position: absolute;
left: 408.5px;
z-index: 2;
}
44% {
position: absolute;
left: 418px;
z-index: 2;
}
45% {
position: absolute;
left: 427.5px;
z-index: 2;
}
46% {
position: absolute;
left: 437px;
z-index: 2;
}
47% {
position: absolute;
left: 446.5px;
z-index: 2;
}
48% {
position: absolute;
top: 48;
left: 456px;
z-index: 2;
}
49% {
position: absolute;
left: 465.5px;
z-index: 2;
}
50% {
position: absolute;
left: 475px;
z-index: 2;
}
51% {
position: absolute;
left: 465px;
transform: scale(1);
z-index: 0;
}
52% {
position: absolute;
left: 455px;
transform: scale(1);
z-index: 0;
}
53% {
position: absolute;
left: 445px;
transform: scale(1);
z-index: 0;
}
54% {
position: absolute;
left: 435px;
transform: scale(1);
z-index: 0;
}
55% {
position: absolute;
left: 425px;
transform: scale(1);
z-index: 0;
}
56% {
position: absolute;
left: 415px;
transform: scale(1);
z-index: 0;
}
57% {
position: absolute;
left: 405px;
transform: scale(1);
z-index: 0;
}
58% {
position: absolute;
left: 395px;
transform: scale(1);
z-index: 0;
}
59% {
position: absolute;
left: 385px;
transform: scale(1);
z-index: 0;
}
60% {
position: absolute;
left: 375px;
transform: scale(1);
z-index: 0;
}
61% {
position: absolute;
left: 365px;
transform: scale(1);
z-index: 0;
}
62% {
position: absolute;
left: 355px;
transform: scale(1);
z-index: 0;
}
63% {
position: absolute;
left: 345px;
transform: scale(1);
z-index: 0;
}
64% {
position: absolute;
left: 335px;
transform: scale(1);
z-index: 0;
}
65% {
position: absolute;
left: 325px;
transform: scale(1);
z-index: 0;
}
66% {
position: absolute;
left: 315px;
transform: scale(1);
z-index: 0;
}
67% {
position: absolute;
left: 305px;
transform: scale(1);
z-index: 0;
}
68% {
position: absolute;
left: 295px;
transform: scale(1);
z-index: 0;
}
69% {
position: absolute;
left: 285px;
transform: scale(1);
z-index: 0;
}
70% {
position: absolute;
left: 275px;
transform: scale(1);
z-index: 0;
}
71% {
position: absolute;
left: 265px;
transform: scale(1);
z-index: 0;
}
72% {
position: absolute;
top: 72;
left: 255px;
transform: scale(1);
z-index: 0;
}
73% {
position: absolute;
left: 245px;
transform: scale(1);
z-index: 0;
}
74% {
position: absolute;
left: 235px;
transform: scale(1);
z-index: 0;
}
75% {
position: absolute;
left: 225px;
transform: scale(1);
z-index: 0;
}
76% {
position: absolute;
left: 215px;
transform: scale(1);
z-index: 0;
}
77% {
position: absolute;
left: 205px;
transform: scale(1);
z-index: 0;
}
78% {
position: absolute;
left: 195px;
transform: scale(1);
z-index: 0;
}
79% {
position: absolute;
left: 185px;
transform: scale(1);
z-index: 0;
}
80% {
position: absolute;
left: 175px;
transform: scale(1);
z-index: 0;
}
81% {
position: absolute;
left: 165px;
transform: scale(1);
z-index: 0;
}
82% {
position: absolute;
left: 155px;
transform: scale(1);
z-index: 0;
}
83% {
position: absolute;
left: 145px;
transform: scale(1);
z-index: 0;
}
84% {
position: absolute;
left: 135px;
transform: scale(1);
z-index: 0;
}
85% {
position: absolute;
left: 125px;
transform: scale(1);
z-index: 0;
}
86% {
position: absolute;
left: 115px;
transform: scale(1);
z-index: 0;
}
87% {
position: absolute;
left: 105px;
transform: scale(1);
z-index: 0;
}
88% {
position: absolute;
left: 95px;
transform: scale(1);
z-index: 0;
}
89% {
position: absolute;
left: 85px;
transform: scale(1);
z-index: 0;
}
90% {
position: absolute;
left: 75px;
transform: scale(1);
z-index: 0;
}
91% {
position: absolute;
left: 65px;
transform: scale(1);
z-index: 0;
}
92% {
position: absolute;
left: 55px;
transform: scale(1);
z-index: 0;
}
93% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
94% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
95% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
96% {
position: absolute;
top: 96;
left: 50;
transform: scale(1);
z-index: 0;
}
97% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
98% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
99% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
100% {
position: absolute;
left: 50;
transform: scale(1);
z-index: 0;
}
}
.is-hidden {
opacity: 0;
visibility: 0;
position: absolute;
}
.container {
width: 500px;
position: relative;
}
body {
background: url("bg.jpg") no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
color: #303030;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.svg-icon {
height: 35px;
width: 35px;
cursor:pointer;
}