空白页面

恶作剧动画页面

1.刚进页面是个空白页面
把鼠标移到页面右边出现手标点击后图片逐个弹出
实现效果的原理：运用到了点击事件和css的位移动画代码通过animation控制不同延迟时间来弹出图片
实现的代码截图：

通过animation配合@keyframes（关键帧）来创建动画
这里所谓的动画就是通过控制时间来执行transform里的（位移、扭曲、旋转、放缩）
这几个属性而这里控制的就是位移（translate）这个属性
下图就是控制位移的代码截图：

因为animation是通过总时间和速度曲线来分配每个动作完成的时间它会
一次性完成动画 一般不会单独一个动作停留很长时间只有给它设置多个
相同的动作那个动作所占的时间百分比就会增加就会给人一种停留的感觉
图中画红线的相同部分就是为了停留长一点时间给人观看图片而设置的