@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,600,700,800&display=swap');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  position: relative;
  box-sizing: border-box;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
}

.button:hover .add-message {
  background: #292c33;
}

.add-message, .added-message{
  padding: 20px 40px;
  display: flex;
  justify-content: center;
} 

.add-message {
  color: white;
  background: #343740;
  transition: background 0.3s;
  border-radius: 4px;
}

.added-message {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #767982;
  border: solid 1px #e9eaed;
  background-color: rgb(248, 249, 251);
  opacity: 0;
  border-radius: 2px;
}

.add-icon,
.added-icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 15px;
}

.add-icon{
  background: url(https://rafaeladeconto.com/archive/ic-product-add-hover.svg) center no-repeat;
}

.added-icon:after {
  content: '';
  display: block;
  width: 0%;
  height: 100%;
  background: url(https://rafaeladeconto.com/archive/ic-product-added.svg) left center no-repeat;
}

/* .add-message.animated {
  animation: fadeout 5s ease-in;
} */
.added-message.animated {
  animation: fadein 5s ease-in;
}
.added-message.animated .added-icon:after {
  animation: appear 5s ease-out;
}

/* @keyframes fadeout {
  0%, 100% { opacity: 1; }
  5%, 95% { opacity: 0; }
} */

@keyframes fadein {
  0%, 100% { opacity: 0; }
  5%, 90% { opacity: 1; }
}

@keyframes appear {
  7% { width: 0%; }
  15%, 100% { width: 100%; }
}

$(".button").click(function(){
  $(".add-message").addClass("animated");
  $(".added-message").addClass("animated");
});


$('.add-message').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
  $(this).removeClass("animated");
});

$('.added-message').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
  $(this).removeClass("animated");
});