CSS Transition - Eases in But Doesn't Ease Out

CSS Transition - eases in but doesn't ease out?

Add the transition properties to the element itself rather than the :hover pseudo-class version.

In doing so, the transition will take place when hovering on and off.

Updated Example

.img-blur {  transition: all 0.35s ease-in-out;}.img-blur:hover {  -moz-filter: blur(4px);  -webkit-filter: blur(4px);  filter: blur(4px);}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

CSS Transition/Transform - Eases out but doesn't ease in?

You forgot to add a transition value to your transform property when hovering over .button1 as below:

transition: transform 0.4s ease-in-out

For every property of the CSS, you need to apply a transition effect to it on both 'keyframes' (In this case that is .button1:hover -> .button1 and .button1 -> .button1:hover)

.button_1 {
    border-width: 0.8px;
    border-color: Lightgray;
    background-color: hsla(209, 72%, 59%, 0.85);
    padding: 8px 12px;
    margin-left: 6px;
    color: white;
    transition: transform 0.5s ease-in-out, scale 0.5s ease-in-out;}

.button_1:hover {
    background: hsla(209, 72%, 59%, 0.6);
    padding: 10px 14px;
    transform: translate(20px, 0px) scale(1.2);
    transition: transform 0.4s ease-in-out ,background-color 0.4s ease-in-out 2ms, padding 0.4s ease-in-out 2ms;}

<html>
  <body>
    <button type="submit" class="button_1";">Subscribe</button>
  </body>
</html>

CSS ease-in-out transition not working properly

You need to take the transition styles:

transition: .3s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);

And remove them from the nav ul li a:hover and add them to the actual element nav ul li a

Whilst they remain on the hover, you are essentially removing the transition when not hovered, therefore the transition does not apply after you leave the hover state.

transition ease-in-out; is not working

Update:

On new requirements, the transition effect needs to be different, please refer the below snippet.

.container {  width: 250px;  height: 300px;  background: #00f;  position: relative;}
.show {  position: absolute;  opacity:0;  height:30%;  bottom:0px;  left:0px;  right:0px;  color: #000;  text-indent: 5px;  background: rgba(255, 255, 255, .5);  transition: opacity 0.5s ease-in-out;}
.container:hover>.show {  opacity:1;}

<div class="container">  <div class="show">Lorem </div></div>

CSS's transition's ease-in-out doesn't seem to work

I noticed you updated the code. Looks like your issue has already been solved.

The .textFrame p was only applying transition for opacity, so you couldn't see the background transition. I seed you added background .... to the transition, you could also do:

transition: all 1000ms ease-in-out;

Another option would be to move the rgba background to inside the .textFrame p, so the background wouldn't suddenly disappear, fading out along with the rest of the element.

Hopefully this helps you understand the cause :)

Keyframe animation :hover doesn't obey the ease-out part of the animation on mouse-out

You can probably resolve this by adding the transition on element when there is no hover at the moment and tweak a little the keyframes. Like this:

.backBtn .backBtnChevronMid {
  animation: animateChevronMid2 0.6s ease-in-out;
  animation-fill-mode: forwards;
}

.backBtn .backBtnChevronFar {
  animation: animateChevronFar2 0.6s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes animateChevronMid2 {
  0% {
    transform: translateX(-0.7rem);
    opacity: 1;
  }

  70%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes animateChevronFar2 {
  0% {
    transform: translateX(-1.4rem);
    opacity: 1;
  }

  70%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

this additional keyframes are exact opposite of the keyframes that you have done. And they do apply when you move your cursor from the element (so on hover off so to speak).

CSS ease in-out scale

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!

How can I change the transition outro ? (CSS transform)

Define the transition: all 0.3s; on your .probtn class instead of the :hover. Else once the hover-state is removed the transition property is removed as well.

.probtn {  border-color: #282E34;  color: #282E34;  transition: all 0.3s; /* moved to base class instead of hover state */  transform-origin: bottom;}
.probtn:hover {  background-color: #282E34;  color: white;  box-shadow: 0px 5px 5px 0px gray;  transform: translate(0px,-5px);  -webkit-transform: translate(0px,-5px);  -moz-transform: translate(0px,-5px);  -ms-transform: translate(0px,-5px);  -o-transform: translate(0px,-5px);}
.btn {  border: 2px solid #282E34;  background-color: white;  color: #282E34;  padding: 14px 28px;  font-size: 16px;  cursor: pointer;  border-radius: 5Px;}

<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>

Reverse transition while not hovering

Add transition: .8s; for .btn and not for .btn:hover.

CSS Transition - Eases in But Doesn't Ease Out