CSS3可以實現一只會飛的鳥，如何實現呢？好的，讓我們來學習它的實現方案，首先需要定義一個鳥的外形，因此我們需要在CSS文件中做出一些初始設置。

.bird {
position: absolute;
width: 100px;
height: 100px;
background: url('bird.png') no-repeat;
}

然后，我們需要做出兩個基礎動畫：向上移動和向下移動。

@keyframes flyUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100px);
}
}
@keyframes flyDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}

現在來為標簽添加動畫，使用animation-iteration-count屬性，該屬性是必要的，否則動畫會只播放一次，然后停止。

.bird {
animation-name: flyUp;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.bird.flap {
animation-name: flap;
animation-duration: 0.2s;
animation-iteration-count: infinite;
}
@keyframes flap {
0% {
background-position-x: 0;
}
50% {
background-position-x: -100px;
}
100% {
background-position-x: 0px;
}
}

動畫已經就緒，現在我們需要添加控制動畫的JavaScript。當按下空格鍵時，我們希望鳥飛起來并開始扇動翅膀，當釋放空格鍵時，鳥落回到原來的位置。

let bird = document.querySelector('.bird');
let birdHeight = bird.offsetHeight;
let isFlying = false;
document.addEventListener('keydown', e =>{
if(e.code === 'Space') {
isFlying = true;
bird.classList.add('flap');
bird.style.animationName = 'flyUp';
bird.style.animationDuration = '1s';
bird.style.animationIterationCount = 'infinite';
}
});
document.addEventListener('keyup', e =>{
if(e.code === 'Space') {
isFlying = false;
bird.classList.remove('flap');
bird.style.animationName = 'flyDown';
bird.style.animationDuration = '1s';
bird.style.animationIterationCount = '1';
bird.style.transform = 'translateY(0)';
}
});
setInterval(() =>{
if(isFlying) {
let birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue('top'));
if(birdTop >0) bird.style.top = `${birdTop - 2}px`;
}
}, 10);

現在我們完成了一只會飛的鳥！