Skip to content

Commit

Permalink
added pop animation on product and slide animation on color-box
Browse files Browse the repository at this point in the history
  • Loading branch information
Jordian0 committed Oct 21, 2024
1 parent 8d4f966 commit 75525dc
Showing 1 changed file with 33 additions and 1 deletion.
34 changes: 33 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -610,6 +610,23 @@ button {

.col-2 .controller {
width: 90%;
z-index: 9;
overflow: hidden;
}
.col-2:hover .controller {
animation: scale-up 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}

100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

.color-box {
Expand All @@ -620,8 +637,23 @@ button {
border-radius: 20px 0 0 20px;
height: 100%;
width: 80%;
z-index: -1;
transform: translateX(150px);
transition: transform 0.5s ease;
}
.col-2:hover .color-box {
animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-left {
0% {
-webkit-transform: translateX(20);
transform: translateX(20);
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

.price {
Expand Down

0 comments on commit 75525dc

Please sign in to comment.