css如何用ease in out,sass - CSS ease in-out scale - Stack Overflow

Im trying to put an animation to scale a angular mat-card on hover.

I have it scaling and doing an ease-in transition.

But i cannot seem to get it to ease out after finished hovering. The card just snaps back to its original size immediately.

Can anyone give a pointer on what i'm missing?

Here is the SCSS I have so far in src/app/styles.scss:

.mat-card {

color: white;

background-color: #2f3441;

opacity: .70;

border-radius: 10px;

&:hover {

transition: all 300ms ease-in;

transform: scale(1.02);

opacity: 1;

border-radius: 10px;

}

&:hover::after {

transition: all 300ms ease-out;

}

}

I have tried placing the ease-out inside the .mat-card but that didnt have any effect either.

Update:

Following the post here CSS Transition - eases in but doesn't ease out? I changed my code to be:

.mat-card {

color: white;

background-color: #2f3441;

opacity: .70;

transition: all 300ms ease-in-out;

}

.mat-card:hover {

transform: scale(1.02);

opacity: 1;

}

The CSS of my original post was inside my styles.scss file, because I want it applied to all cards in the app, but doing the above made the transition effect stop working entirely.

It wasn't until i moved the css into the components .scss file itself that it finally began to transition in and out. src/app/pages/mycomponent/mycomponent.scss

So, why would the transition not work when added to my apps global styles.scss file, but work when added specifically to the components?