1つのdivに2つのボタンを使用すると、どのようにゆっくりとフェードインして消えますか？ - html、css

フェードアウトアニメーションが機能していません。 1つのdivに2つのIDを配置することはできません。
フェードアウトはどのように機能しますか？
こちらがjsFiddleです

html

<a href="#pop">appear</a>

<div id="pop" id="pop_close">
<a href="#pop_close">disappear</a>
</div>

CSS

body {
padding: 10em;
}
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
}

#pop:target {
opacity: 1;
z-index: 1;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}

#pop_close:target {
opacity: 0;
z-index: -1;
-webkit-animation: fadeOut 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeOut 1s; /* Firefox < 16 */
-ms-animation: fadeOut 1s; /* Internet Explorer */
-o-animation: fadeOut 1s; /* Opera < 12.1 */
animation: fadeOut 1s;
}



@keyframes fadeOut {
from { opacity: 1; }
to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeOut {
from { opacity: 1; }
to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeOut {
from { opacity: 1; }
to   { opacity: 0; }
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

回答：

ここに作業フィドルがあります http://jsfiddle.net/oogley_boogley/wqju9jh6/19/

CSS：

#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s;  /* key style here, look into -webkit and -moz etc as well */
}

丁度、 複数のIDを持つことはできません 同じページに、
したがって、IDを変更して作成する必要があります :target a 特定 現れる：

div[id^=popUp] // means: target DIV element who"s ID "starts with".

HTMLの場合、番号を追加してIDを一意にするだけです。

div[id^=popUp]{
height: 5em;
width: 5em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s;
}

div[id^=popUp]:target {
opacity: 1;
z-index: 1;
}

<a href="#popUp1">appear</a>
<div id="popUp1">
<a href="#">disappear</a>
</div>

<a href="#popUp2">appear</a>
<div id="popUp2">
<a href="#">disappear</a>
</div>