CSS ease in-out scale

Question

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?

score 1 · Accepted Answer · answered Aug 16 '19 at 02:42

Sorry for submitting an answer instead of putting a comment, is just that I don't have enough reputation yet.

Your SCSS should look something like this:

.mat-card {
  color: white;
  background-color: #2f3441;
  opacity: .70;
  border-radius: 10px;
  transition: all 300ms ease-out;

  &:hover {
    transition: all 300ms ease-in;
    transform: scale(1.02);
    opacity: 1;
    border-radius: 10px;
  }
}

The issue was that you're trying to put the ease-out on the :after of your mat-card which will basically do nothing due to that the :after selector is for the content within that certain HTML tag.

Hope this helps!

CSS ease in-out scale

1 Answers1