2つの間に若干の遅延があるCSSアニメーションでdivをアニメーション化する

私がやっていることは基本的に、CSSアニメーションで表示したり隠したりする通知バーです。問題は、2つのアニメーションの発生の間にかなりの遅延を生じさせることができないことです。2つの間に若干の遅延があるCSSアニメーションでdivをアニメーション化する

HTML

<div id="notification" class="alert" role="alert"></div>

$('#notification').html('This place is already occupied!').addClass('alert-warning animated bounceInDown').show().delay(5000).addClass('bounceOutUp');

CSS

#notification { 
    position: fixed; 
    top: 5px; 
    border-radius: 0; 
    width: 100%; 
    display: none; 
    z-index: 1200 !important; 
} 
.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
@-webkit-keyframes bounceInDown { 
    from, 60%, 75%, 90%, to { 
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 
    0% { 
     opacity: 0; 
     -webkit-transform: translate3d(0, -3000px, 0); 
     transform: translate3d(0, -3000px, 0); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 25px, 0); 
     transform: translate3d(0, 25px, 0); 
    } 
    75% { 
     -webkit-transform: translate3d(0, -10px, 0); 
     transform: translate3d(0, -10px, 0); 
    } 
    90% { 
     -webkit-transform: translate3d(0, 5px, 0); 
     transform: translate3d(0, 5px, 0); 
    } 
    to { 
     -webkit-transform: none; 
     transform: none; 
    } 
} 
@keyframes bounceInDown { 
    from, 60%, 75%, 90%, to { 
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 
    0% { 
     opacity: 0; 
     -webkit-transform: translate3d(0, -3000px, 0); 
     transform: translate3d(0, -3000px, 0); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 25px, 0); 
     transform: translate3d(0, 25px, 0); 
    } 
    75% { 
     -webkit-transform: translate3d(0, -10px, 0); 
     transform: translate3d(0, -10px, 0); 
    } 
    90% { 
     -webkit-transform: translate3d(0, 5px, 0); 
     transform: translate3d(0, 5px, 0); 
    } 
    to { 
     -webkit-transform: none; 
     transform: none; 
    } 
} 
.bounceInDown { 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
} 
@-webkit-keyframes bounceOutUp { 
    20% { 
     -webkit-transform: translate3d(0, -10px, 0); 
     transform: translate3d(0, -10px, 0); 
    } 
    40%, 45% { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 20px, 0); 
     transform: translate3d(0, 20px, 0); 
    } 
    to { 
     opacity: 0; 
     -webkit-transform: translate3d(0, -2000px, 0); 
     transform: translate3d(0, -2000px, 0); 
    } 
} 
@keyframes bounceOutUp { 
    20% { 
     -webkit-transform: translate3d(0, -10px, 0); 
     transform: translate3d(0, -10px, 0); 
    } 
    40%, 45% { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 20px, 0); 
     transform: translate3d(0, 20px, 0); 
    } 
    to { 
     opacity: 0; 
     -webkit-transform: translate3d(0, -2000px, 0); 
     transform: translate3d(0, -2000px, 0); 
    } 
} 
.bounceOutUp { 
    -webkit-animation-name: bounceOutUp; 
    animation-name: bounceOutUp; 
}

出典

2017-04-01 Ayan

あなたはアニメーションが実行された後に次のアニメーションを追加しsetTimeout()でanimationendイベントリスナーを追加することができます。

var $notification = $('#notification'), 
 
    delay = 5000; 
 
$notification.html('This place is already occupied!').addClass('alert-warning animated bounceInDown').show().one('animationend',function() { 
 
    var timeout = setTimeout(function() { 
 
    $notification.addClass('bounceOutUp'); 
 
    },delay) 
 
});

#notification { 
 
    position: fixed; 
 
    top: 5px; 
 
    border-radius: 0; 
 
    width: 100%; 
 
    display: none; 
 
    z-index: 1200 !important; 
 
} 
 

 
.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 

 
@-webkit-keyframes bounceInDown { 
 
    from, 
 
    60%, 
 
    75%, 
 
    90%, 
 
    to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -3000px, 0); 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 25px, 0); 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 
    75% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, 5px, 0); 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 
    to { 
 
    -webkit-transform: none; 
 
    transform: none; 
 
    } 
 
} 
 

 
@keyframes bounceInDown { 
 
    from, 
 
    60%, 
 
    75%, 
 
    90%, 
 
    to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -3000px, 0); 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 25px, 0); 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 
    75% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, 5px, 0); 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 
    to { 
 
    -webkit-transform: none; 
 
    transform: none; 
 
    } 
 
} 
 

 
.bounceInDown { 
 
    -webkit-animation-name: bounceInDown; 
 
    animation-name: bounceInDown; 
 
} 
 

 
@-webkit-keyframes bounceOutUp { 
 
    20% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    40%, 
 
    45% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 20px, 0); 
 
    transform: translate3d(0, 20px, 0); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -2000px, 0); 
 
    transform: translate3d(0, -2000px, 0); 
 
    } 
 
} 
 

 
@keyframes bounceOutUp { 
 
    20% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    40%, 
 
    45% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 20px, 0); 
 
    transform: translate3d(0, 20px, 0); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -2000px, 0); 
 
    transform: translate3d(0, -2000px, 0); 
 
    } 
 
} 
 

 
.bounceOutUp { 
 
    -webkit-animation-name: bounceOutUp; 
 
    animation-name: bounceOutUp; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="notification" class="alert" role="alert"></div>

はまた、同じ技術を使用してちょうど5秒の代わりに、タイマーを使用する.bounceOutUpクラスのanimation-delayを変更することができます。

var $notification = $('#notification'); 
 

 
$notification.html('This place is already occupied!').addClass('alert-warning animated bounceInDown').show().one('animationend',function() { 
 
    $(this).addClass('bounceOutUp'); 
 
});

#notification { 
 
    position: fixed; 
 
    top: 5px; 
 
    border-radius: 0; 
 
    width: 100%; 
 
    display: none; 
 
    z-index: 1200 !important; 
 
} 
 

 
.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 

 
@-webkit-keyframes bounceInDown { 
 
    from, 
 
    60%, 
 
    75%, 
 
    90%, 
 
    to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -3000px, 0); 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 25px, 0); 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 
    75% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, 5px, 0); 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 
    to { 
 
    -webkit-transform: none; 
 
    transform: none; 
 
    } 
 
} 
 

 
@keyframes bounceInDown { 
 
    from, 
 
    60%, 
 
    75%, 
 
    90%, 
 
    to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -3000px, 0); 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 25px, 0); 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 
    75% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, 5px, 0); 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 
    to { 
 
    -webkit-transform: none; 
 
    transform: none; 
 
    } 
 
} 
 

 
.bounceInDown { 
 
    -webkit-animation-name: bounceInDown; 
 
    animation-name: bounceInDown; 
 
} 
 

 
@-webkit-keyframes bounceOutUp { 
 
    20% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    40%, 
 
    45% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 20px, 0); 
 
    transform: translate3d(0, 20px, 0); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -2000px, 0); 
 
    transform: translate3d(0, -2000px, 0); 
 
    } 
 
} 
 

 
@keyframes bounceOutUp { 
 
    20% { 
 
    -webkit-transform: translate3d(0, -10px, 0); 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    40%, 
 
    45% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, 20px, 0); 
 
    transform: translate3d(0, 20px, 0); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, -2000px, 0); 
 
    transform: translate3d(0, -2000px, 0); 
 
    } 
 
} 
 

 
.bounceOutUp { 
 
    -webkit-animation-name: bounceOutUp; 
 
    animation-name: bounceOutUp; 
 
    animation-delay: 5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="notification" class="alert" role="alert"></div>

出典

2017-04-01 16:12:47

'on'か' one'ですか？ – Ayan

@Ayanあなたが好きな方を使用してください。私はあなたがこれを一度実行したかったと思った。 http://api.jquery.com/one/ http://api.jquery.com/on/ –

はい、間違いなく一度、ちょうど私が知りませんでした。 – Ayan

私が正しくあなたを理解していればいけないけど、することができますCSSで遅延します

div { 
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ 
    animation-delay: 2s; 
}

出典

2017-04-01 16:00:31

が発生しないように私の最初のアニメーションを引き起こし、その。 – Ayan

2つの間に若干の遅延があるCSSアニメーションでdivをアニメーション化する

答えて

関連する問題