In this video we will create device transformation animation icon using CSS
In HTML File
<div class="device">
<div class="others-device"></div>
<div class="others-device"></div>
<div class="others-device"></div>
</div>
In CSS File
.device {
width: 220px;
height: 200px;
margin: 0 auto;
}
.device .others-device {
width: 160px;
height: 100px;
border-radius: 5px;
background: #6e6e6e;
margin: -50px 0 0 -80px;
position: absolute;
top: 50%;
left: 50%;
transform-type: preserve-3d;
animation: loading-one 3s cubic-bezier(0.55, 0.3, 0.24, 0.99) infinite;
}
.device .others-device:nth-child(2) {
width: 150px;
height: 90px;
border-radius: 3px;
background: #000;
margin: -45px 0 0 -75px;
z-index: 1;
animation-name: loading-two;
}
.device .others-device:nth-child(3) {
width: 40px;
height: 20px;
border-radius: 0px 0px 5px 5px;
background: #ebcc08;
margin: 50px 0 0 -20px;
z-index: 2;
animation-name: loading-three;
}
@keyframes loading-one {
3%, 97% {
width: 160px;
height: 100px;
margin-top: -50px;
margin-left: -80px;
}
30%, 36% {
width: 80px;
height: 120px;
margin-top: -60px;
margin-left: -40px;
}
63%, 69% {
width: 40px;
height: 80px;
margin-top: -40px;
margin-left: -20px;
}
}
@keyframes loading-two {
3%, 97% {
width: 150px;
height: 90px;
margin-top: -45px;
margin-left: -75px;
}
30%, 36% {
width: 70px;
height: 96px;
margin-top: -48px;
margin-left: -35px;
}
63%, 69% {
width: 32px;
height: 60px;
margin-top: -30px;
margin-left: -16px;
}
}
@keyframes loading-three {
3%, 97% {
width: 40px;
height: 20px;
margin-top: 50px;
margin-left: -20px;
}
30%, 36% {
width: 8px;
height: 8px;
margin-top: 49px;
margin-left: -5px;
border-radius: 8px;
}
63%, 69% {
width: 16px;
height: 4px;
margin-top: -37px;
margin-left: -8px;
border-radius: 10px;
}
}
0 Comments