最近在學習CSS3動畫，今天我們來分享一種左右變大動畫的實現方法。

首先，我們需要定義一個動畫關鍵幀，并在其中設置元素從左側變大并向右移動的效果。

@keyframes zoom-in-right {
0% {
transform: translateX(-50%) scale(0);
opacity: 0;
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}

接下來，我們將這個動畫關鍵幀應用到元素上，并設置動畫持續時間、重復次數等選項。

.zoom-in-right {
animation-name: zoom-in-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}

最后，我們將該元素的起始位置設置在頁面左側，并添加一個觸發動畫的交互事件，如鼠標點擊事件。

.box {
position: fixed;
left: 0;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #f00;
cursor: pointer;
}
.box:hover {
animation: zoom-in-right 1s ease-in-out forwards;
}

以上就是CSS實現左右變大動畫的步驟，如果你想給網頁增加一些活力，這種動畫效果是非常實用的。如果你想學習更多CSS3動畫效果，可以繼續深入學習。