CSSアニメーションがCSSキーフレームを通して一度ループした後に停止させるにはどうすればよいですか？

Question

CSSアニメーションとキーフレームを使用して一度実行されるズームアウトエフェクトを取得しようとしています。ただし、ズームはループし続け、停止しません。一度ループすればどうすればいいですか？

header { 
    height: 100vh; 
    width: 100%; 
    float: left; 
    height: calc(100vh - 40px); 
    position: static; 
    overflow: hidden; 
    background: url("../uploads/header-image.jpg"); 
    background-size:100%; 
    background-position: center center; 
    animation: imagezoom 8s forwards; 
} 

@keyframes imagezoom { 
    0%, 100% { 
    background-size: 110% auto; 
    -webkit-background-size: 110%; 
    } 
    50% { 
    background-size: 100% auto; 
    -webkit-background-size: 100%; 
    } 
} 

Answer 1

1反復私が設定

animation-iteration-count: 1