css3删除功能,仅使用css3删除元素时应用css3动画

Bellow片段会在关闭div时显示您打开的确切动画。

＆＃13;

＆＃13;

$(document).ready(function() {

$(".container").append($("

Hello Jimmy! X

"));

$(".close").on('click', function() {

$(this).parent().css({

"animation": "close-anime 1s forwards"

});

});

});＆＃13;

.container {

padding: 10px;

background: orange;

}

.child-container {

background: red;

height: 100px;

width: 150px;

padding: 10px;

animation-name: anime;

animation-duration: 1s;

}

.close {

float: right;

cursor: pointer;

}

.close:hover {

color: #fff;

}

/*ANIMATIONS*/

@keyframes anime {

from,

0%,

100%,

to {

animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);

}

0% {

opacity: 0;

transform: translate3d(0, -200px, 0);

}

100% {

opacity: 1;

transform: translate3d(0, 0, 0);

}

}

@keyframes close-anime {

from,

0%,

100%,

to {

animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);

}

0% {

opacity: 0;

transform: translate3d(0, 0, 0);

}

100% {

opacity: 1;

transform: translate3d(0, -200px, 0);

}

}＆＃13;

添加代码：

的CSS 强>

@keyframes close-anime {

from,

0%,

100%,

to {

animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);

}

0% {

opacity: 0;

transform: translate3d(0, 0, 0);

}

100% {

opacity: 1;

transform: translate3d(0, -200px, 0);

}

}

JS 强>

$(this).parent().css({

"animation": "close-anime 1s forwards"

});