Gift animation
by Andrey Izman
HTML
<div class="gift_gif">
<img...
CSS
.gift_gif {
width: 42px;
height: 45px;
position: relative;
display: inline-block;
vertical-align: middle;
top: 6px;
}
.gift_gif .piece-1,
.gift_gif .piece-2,
.gift_gif .piece-3 {
position: absolute;
top: -20px;
left: 0;
animation-fill-mode: forwards;
}
.gift_gif .gift {
width: 33px;
height: 34px;
object-fit: contain;
animation: larger_gift 12s linear infinite;
}
.gift_gif .piece-1 {
width: 2.11px;
height: 3.17px;
left: 10px;
animation: piece_drop_down_1 12s linear infinite;
}
.gift_gif .piece-2 {
width: 3.17px;
height: 4.22px;
left: 20px;
animation: piece_drop_down_2 12s linear infinite;
}
.gift_gif .piece-3 {
width: 3.17px;
height: 4.22px;
left: 30px;
animation: piece_drop_down_3 12s linear infinite;
}
@keyframes larger_gift {
0% {
transform: scale(0)
}
2% {
transform: scale(1)
}
4% {
transform: scale(1.1)
}
6% {
transform: scale(1)
}
8% {
transform: scale(.9)
}
10% {
transform: scale(1)
}
12% {
transform: scale(1.1)
}
14% {
transform: scale(1)
}
16% {
transform: scale(.9)
}
18% {
transform: scale(1)
}
20% {
transform: scale(1.1)
}
22% {
transform: scale(1)
}
24% {
transform: scale(.9)
}
26% {
transform: scale(1)
}
28% {
transform: scale(1.1)
}
30% {
transform: scale(1)
}
32% {
transform: scale(.9)
}
34% {
transform: scale(1)
}
36% {
transform: scale(1.1)
}
38% {
transform: scale(1)
}
40% {
transform: scale(.9)
}
42% {
transform: scale(1)
}
44% {
transform: scale(1.1)
}
46% {
transform: scale(1)
}
48% {
transform: scale(.9)
}
50% {
transform: scale(1)
}
52% {
transform: scale(1.1)
}
54% {
transform: scale(1)
}
56% {
transform: scale(.9)
}
58% {
transform: scale(1)
}
60% {
transform:...