一个css小动画实现效果 让一个小方块做“Z”字型移动

今天是人生中第一场面试，准备的特别不充分，因为本来也觉得自己肯定过不了面试。开始做了一份软件开发的笔试题，后来听说有招web前端，于是又做了一份前端的笔试题。恩，发现自己好多都不会。
有一道大题：
写一个css动画，让一个50X50像素的方块在300X400像素窗口做“Z”字型移动，5s钟循环五次；
作为一个菜鸡，我自然是没写出来，居然用transition，可能单词还拼写错了。
注意：transition（变换）是在固定的时间变换属性值；
animation（动画）是transition（变换）的高级版，可以一帧一帧的做
好了话不多说，让我们来实现这个效果吧
首先在html里面定义两个格子元素，一个ID为big 一个ID为small

<div id="big">
<div id="small"></div>
</div>

然后给两个格子加个大小和边框阴影，注意小盒子一定要有position: relative;这个属性，这样才能让小盒子在大盒子里面移动。

#big{height: 400px;width: 300px;box-shadow: 1px 1px 3px  #222;}
#small{height: 50px;width: 50px;box-shadow: 1px 1px 3px  #222;position: relative;}

然后就是重头戏辣~~
我们定义一个名为move的动画规则，写出每一帧要移动到的元素位置
走一个z字型的画一共4个帧，对，0%是起始帧的位置，33%是第一帧的位置，以此类推。。。。
记得小盒子移动的位置不能超过大盒子，所以移动位置得用大盒-小盒

@keyframes move{
0%{
    left: 0px;
    top: 0px;
}
33%{
    left: 250px;
    top: 0px;
}
66%{
    left:0px;
    top: 350px; 
}
100%{
    left: 250px;
    top: 350px;
}
}

你们不嫌麻烦的话可以加个兼容@-webkit-keyframes move 和@-moz-keyframes move
然后再给小盒加上动画

#small{
animation:move 1s infinite linear ;
}

move是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环 linear是线性变化 (step-end则是无线性变化)
好啦，我们的动画就完成了，至于循环五次.....这个这个，容我再问问大神怎么做到
新增：感谢浔阳月夜丶同学
循环五次可以用animation-iteration-count:5;做到，也可以直接缩写为
animation:move 1s linear 5;

另外对布局做了一个修改，将两个盒子进行了嵌套，用大盒子的div包含小盒子的div，这样比较好懂一些。
如果直接div没有嵌套的话，一定要给大盒子加上position: absolute;属性。