使用CSS動畫製作div，並在兩次之間稍稍延遲

我想要做的事情基本上是一個通知欄，我想用CSS動畫顯示和隱藏通知欄。問題是我無法在兩個動畫的發生之間做出很好的延遲。使用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>

你也可以使用相同的技術，只是改變.bounceOutUp類的animation-delay爲5秒，而不是使用一個計時器。

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

它是「開」還是「一」？ – Ayan

@Ayan使用你喜歡的任何一個。我以爲你只是想讓它運行一次。 http://api.jquery.com/one/ http://api.jquery.com/on/ –

絕對有一次，只是我不知道'one' =） – Ayan

不知道如果我理解正確的話，但你可以使延遲與CSS：

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

來源

2017-04-01 16:00:31

它引起我的第一個動畫不會發生。 – Ayan

使用CSS動畫製作div，並在兩次之間稍稍延遲

回答

相關問題