PRODUCT DESIGN BY GALA
UX
BY
DESIGN
PRODUCT
GALA
Design is key, but are you also looking for effective business solutions?
You are at the right place!
Let me show you some proven projects
Finance
CRM
B2C, B2B, B2E
Design system
.animated-arrow-css {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
cursor: pointer;
}
.animated-arrow-css::before,
.animated-arrow-css::after {
content: '';
position: absolute;
background-color: black;
transition: all 0.3s ease;
}
.animated-arrow-css::before {
top: 50%;
left: 0;
width: 16px;
height: 2px;
transform: translateY(-50%);
opacity: 0.7;
}
.animated-arrow-css::after {
top: 50%;
right: 0;
width: 8px;
height: 8px;
border-top: 2px solid black;
border-right: 2px solid black;
transform: translateY(-50%) rotate(45deg);
opacity: 0.7;
}
/* Анимация при добавлении класса animate */
.animated-arrow-css.animate::before {
animation: arrow-line-move 1.2s cubic-bezier(0.77,0,0.175,1) forwards;
opacity: 1;
}
.animated-arrow-css.animate::after {
animation: arrow-head-move 1.2s cubic-bezier(0.77,0,0.175,1) forwards;
opacity: 1;
}
@keyframes arrow-line-move {
0% { transform: translateY(-50%) translateX(0); opacity: 0.7; }
30% { transform: translateY(-50%) translateX(8px); opacity: 1; }
60% { transform: translateY(-50%) translateX(0); opacity: 0.7; }
100% { transform: translateY(-50%) translateX(0); opacity: 0.7; }
}
@keyframes arrow-head-move {
0% { transform: translateY(-50%) translateX(0) rotate(45deg); opacity: 0.7; }
30% { transform: translateY(-50%) translateX(8px) rotate(45deg); opacity: 1; }
60% { transform: translateY(-50%) translateX(0) rotate(45deg); opacity: 0.7; }
100% { transform: translateY(-50%) translateX(0) rotate(45deg); opacity: 0.7; }
}
Ready to discuss your success? Let's chat.
Let's write your own beautiful success story.
.animated-arrow .arrow-body,
.animated-arrow .arrow-head {
opacity: 0.7;
transform: translateX(0);
transition: none;
}
.animated-arrow.animate .arrow-body,
.animated-arrow.animate .arrow-head {
animation: arrow-move 1.2s cubic-bezier(0.77,0,0.175,1) 1;
}
@keyframes arrow-move {
0% {
transform: translateX(0);
opacity: 0.7;
}
30% {
transform: translateX(8px);
opacity: 1;
}
60% {
transform: translateX(0);
opacity: 0.7;
}
100% {
transform: translateX(0);
opacity: 0.7;
}
}
.animated-arrow .arrow-body,
.animated-arrow .arrow-head {
opacity: 0.7;
transform: translateX(0);
transition: none;
}
.animated-arrow.animate .arrow-body,
.animated-arrow.animate .arrow-head {
animation: arrow-move 1.2s cubic-bezier(0.77,0,0.175,1) 1;
}
@keyframes arrow-move {
0% {
transform: translateX(0);
opacity: 0.7;
}
30% {
transform: translateX(8px);
opacity: 1;
}
60% {
transform: translateX(0);
opacity: 0.7;
}
100% {
transform: translateX(0);
opacity: 0.7;
}
}
