CSS 实现div侧面弹性滑出效果

             今天做了个小功能,如下:

hibenben.com1.GIF

这就是一个侧滑效果,在css style里就能实现

          /* 首先用到了keyframes,想要深究可以自行进入w3school官网搜索学习,另外一个transform平移,而translate3d呢是一个比translate多两个参数的东西,可以实现更丰富的效果 */
         @keyframes bounceInLeft {
                0% {
                    transform: translate3d(-3000px, 0, 0);
                }
                60% {
                    /*  opacity: 1;不透明*/
                    transform: translate3d(25px, 0, 0);
                }
                75% {
                    transform: translate3d(0px, 0, 0);
                }
                90% {
                    transform: translate3d(0px, 0, 0);
                }
                100% {
                    transform: none;
                }
            }

             <!-- 这里使用上面定义的动画效果,后面用到了贝塞尔曲线实现快慢效果 -->
            .floatImg{
                animation: bounceInLeft 3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

另外学到了一个很好玩的东西position,我总把它记成location,类似于Android xml的布局定位属性
http://www.w3school.com.cn/cssref/pr_class_position.asp

style="position: fixed"
 /* 它有四个属性absolute、fixed、relative、static、inherit*/
具体上面给了链接，我就不一一解释了，准备准备下班赶地铁了！

so simple!