使用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，并在两次之间稍稍延迟

回答

相关问题