左画面左からスライドして要素を表示させたときのメモ。

.wrapper {
opacity: 0;
animation: SlideIn 2.1s;
animation-delay: 1.0s;
animation-fill-mode:forwards;	
}
@keyframes SlideIn {
0% {
opacity: 0;
transform: translateX(-148px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

animation-delayで発動を遅らせているため、発動する前に要素が丸見えになってしまう。これを回避するためにopacityを0に設定して見えないようにしている。
animation-fill-mode:forwards;はアニメーション終了後のスタイルを適応してくれるらしい。これでopacity: 1;が適用されるので、アニメーション終了後に元々要素に設定していたopacity: 0;が適用されて見えなくなるということはない。
translateX(-148px)で要素が左に148pxほど寄った状態になり、100%で元の位置に戻る。

以前はjsを使わなければなりませんでしたが、IEを捨て去ることができた（動作保証外にできた）のでcssだけで実装できるようになったのはうれしい。javascriptは得意ではないので・・・。