CSS怎么寫顯示和隱藏動(dòng)畫

在CSS中，我們可以使用transition屬性來實(shí)現(xiàn)顯示和隱藏動(dòng)畫，以下是一個(gè)簡(jiǎn)單的例子：

HTML代碼：

<div id="mydiv">我是一個(gè)div元素</div>
<button id="mybutton">顯示/隱藏div元素</button>

CSS代碼：

#mydiv {
  width: 200px;
  height: 200px;
  background-color: #f00;
  opacity: 0;
  transition: opacity 1s;
}
#mybutton {
  position: absolute;
  top: 50px;
  left: 50px;
}

JavaScript代碼：

var mydiv = document.getElementById('mydiv');
var mybutton = document.getElementById('mybutton');
mybutton.addEventListener('click', function() {
  if (mydiv.style.opacity === '0') {
    mydiv.style.opacity = '1';
  } else {
    mydiv.style.opacity = '0';
  }
});

在這個(gè)例子中，我們創(chuàng)建了一個(gè)div元素和一個(gè)按鈕，當(dāng)按鈕被點(diǎn)擊時(shí)，它會(huì)切換div元素的透明度，從而實(shí)現(xiàn)顯示和隱藏動(dòng)畫，CSS的transition屬性用于指定透明度變化的持續(xù)時(shí)間。