Try to search your question here, if you can't find : Ask Any Question Now ?

CSS transition does not work all of the time

HomeCategory: stackoverflowCSS transition does not work all of the time
Avatarwillson asked 4 months ago

I have some TypeScript that adds the element to the DOM. Then using setTimeOut() it adds the transIn class to the element which causes it to transition. This works. Works just fine.

However, if someone jams on the button causing it to fire multiple times then it doesn’t ‘always’ work. It works sometimes?

Any idea what I can do to reset?

.alert-holder {
 position: fixed;
 z-index: 11;
 top: 10px;
 right: 10px;
 height: 30px;

 max-width: 70%;

.alert-element {
 color: rgba(255,255,255,0.8);
 overflow: hidden;
 font-weight: 400;
 display: flex;
 align-items: stretch;
 transition: all 400ms ease-in-out;

 .icon {
  position: absolute;
  z-index: 1;
  right: 0;
  display: inline-block;
  height: 30px;
  width: 30px;


.icon i {
 font-size: 16px;
 color: #fff;
 width: 30px;
 text-align: center;
 opacity: 0;
 transform: scale(0.2) translateY(50px);
 transition: all 300ms cubic-bezier(0, 0.6, 0.35, 1.4) 400ms;

.text {
 background: #000;
 padding: 0 40px 0 10px;
 height: 30px;
 line-height: 30px;
 display: inline-block;
 align-items: center;
 opacity: 0;
 font-size: 13px;
 transform: translateX(200px);
 //transform: rotateY(90deg);
 transition: all 500ms ease-in-out 450ms;
 transform-origin: right;



.transIn {
 opacity: 1;
 transform: rotate(0deg) scale(1);

.transIn.alert-bad i.alert-bad {
 display: inline-block;
 transform: scale(1) translateY(0px);
 opacity: 1;

.transIn .text {
 //transform: rotateY(0deg);
 transform: translateX(-10px);
 opacity: 1;
1 Answers
Best Answer
AvatarMatthias answered 4 months ago
Your Answer

5 + 15 =

Popular Tags

WP Facebook Auto Publish Powered By :