Tweak: animation expertise — courbe et transform des items
All checks were successful
Deploy / Deploy to Production (push) Successful in 16s
All checks were successful
Deploy / Deploy to Production (push) Successful in 16s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8148a1e63b
commit
feb300f76e
1 changed files with 7 additions and 4 deletions
|
|
@ -395,7 +395,10 @@
|
||||||
.expertise-text {
|
.expertise-text {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
|
}
|
||||||
|
|
||||||
|
.expertise-text, .expertise-item {
|
||||||
|
transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Individual text items */
|
/* Individual text items */
|
||||||
|
|
@ -406,14 +409,14 @@
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
transform: scale(0.9);
|
transform: scale(0.75) translateX(4rem);
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.expertise-item.active {
|
.expertise-item.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1);
|
transform: scale(1) translateX(0);
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile (≤ 700px) */
|
/* Mobile (≤ 700px) */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue