css3動畫如何讓元素一開始是隱藏的？

html頁面里，我想對這個元素實現動畫效果：

&

&

&

css樣式表：

.end-male{

position:absolute;

width:30%;

height:15%;

top:50%;

left:20%;

/*opacity:0;*/

transform-origin:50% 50%;

-webkit-transform-origin:50% 50%;

}

.zoom-icon1{

animation:zoomIcon 1.5s ease-in-out 1.5s;

-webkit-animation:zoomIcon 1.5s ease-in-out 1.5s;

animation-fill-mode:forwards;

-webkit-animation-fill-mode:forwards;

}

@keyframes zoomIcon{

0%{transform:scale(0);opacity:0;}

25%{transform:scale(1.4);}

50%{transform:scale(0.8);}

75%{transform:scale(1.2);}

100{transform:scale(1);opacity:1;}

}

@-webkit-keyframes zoomIcon{

0%{-webkit-transform:scale(0);opacity:0;}

25%{-webkit-transform:scale(1.4);}

50%{-webkit-transform:scale(0.8);}

75%{-webkit-transform:scale(1.2);}

100{-webkit-transform:scale(1);opacity:1;}

}

我想實現的效果是一開始這個end-male是不顯示的，但動畫開始之後，這個元素就是可見的，直到執行完畢，這個end-male也不會消失（但現在的效果是一開始這個end-male就顯示出來了，而如果我將opacity:0一行的注釋去掉，這個元素就都一直隱藏掉了，動畫執行的效果也看不到。）請問我要怎樣才能實現end-male一開始是隱藏的，執行動畫的時候才出來，然後執行完動畫也是不消失的？

animation-fill-mode : none | forwards | backwards | both;
animation-fill-mode:backwards;
在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。