CSS3帶來了許多驚人的動畫效果，其中之一是開門動畫。無論是網頁設計師還是前端開發人員，都喜歡將開門動畫應用于網站或應用程序中。這篇文章將為您介紹如何使用CSS3創建一個簡單的開門動畫。

/*定義容器*/
.container {
position: relative;
width: 200px;
height: 200px;
perspective: 1000px;
}
/*定義箱子*/
.box {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: left;
transition: transform 1s;
}
/*定義左面*/
.box:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
left: 0;
background: #333;
transform-origin: right;
transform: rotateY(-90deg);
transition: transform 1s, width 1s;
}
/*定義右面*/
.box:before {
content: "";
position: absolute;
width: 50%;
height: 100%;
right: 0;
background: #333;
transform-origin: left;
transform: rotateY(90deg);
transition: transform 1s, width 1s;
}
/*定義鼠標懸停狀態*/
.container:hover .box {
transform: rotateY(-90deg);
}
/*定義箱子動畫*/
.container:hover .box:before {
width: 0;
transform: rotateY(0deg);
}
.container:hover .box:after {
width: 0;
transform: rotateY(0deg);
}

首先，我們創建一個包含兩個元素的容器：.box:before和.box:after。然后，我們定義了.box的css樣式，它包括了在preserve-3d中保留3d變換的transform-style屬性。我們利用transition屬性為每個元素設置1秒的過渡，以便在鼠標懸停時出現動畫效果。

在定義左面（.box:after）和右面（.box:before）時，我們設置了旋轉度數（-90deg和90deg），這是因為我們想要它們與.box元素垂直地放置在同一平面上。

最后，我們利用鼠標懸停狀態改變.box、.box:before和.box:after的寬度和旋轉角度，從而實現了開門的動畫效果。