今天小颖利用CSS Animations模拟银行吞卡动画做了一个简单的动画嘻嘻，有兴趣的可以把代码复制下来自己试试。下面一起来看看html+css代码吧
html代码：
<body> <div class="main"> <div class="card-slot"> </div> <div class="person-view"> <div class="person-img"> </div> </div> </div> </body>
css代码：
<style media="screen"> .main { width: 30%; margin: 0 auto; } .card-slot { min-height: 15px; border: 3px solid gray; width: 260px; } .person-view { width: 230px; padding: 15px 0 0 20px; } .person-img { height: 240px; background-image: url(images/bgNav.png); background-repeat: no-repeat; -moz-animation: animations 3s ease forwards; -webkit-animation: animations 3s ease forwards; animation: animations 3s ease forwards; } @-webkit-keyframes animations { 0% { -webkit-transform: translate(0); } 20% { -webkit-transform: translate(0, -16px); background-position-y: -15px; } 40% { -webkit-transform: translate(0, -16px); background-position-y: -30px; } 60% { -webkit-transform: translate(0, -16px); background-position-y: -45px; } 80% { -webkit-transform: translate(0, -16px); background-position-y: -60px; } 100% { -webkit-transform: translate(0, -16px); background-position-y: -70px; } } @-moz-keyframes animations { 0% { -webkit-transform: translate(0); } 20% { -webkit-transform: translate(0, -16px); background-position-y: -15px; } 40% { -webkit-transform: translate(0, -16px); background-position-y: -30px; } 60% { -webkit-transform: translate(0, -16px); background-position-y: -45px; } 80% { -webkit-transform: translate(0, -16px); background-position-y: -60px; } 100% { -webkit-transform: translate(0, -16px); background-position-y: -70px; } } @keyframes animations { 0% { -webkit-transform: translate(0); } 20% { -webkit-transform: translate(0, -16px); background-position-y: -15px; } 40% { -webkit-transform: translate(0, -16px); background-position-y: -30px; } 60% { -webkit-transform: translate(0, -16px); background-position-y: -45px; } 80% { -webkit-transform: translate(0, -16px); background-position-y: -60px; } 100% { -webkit-transform: translate(0, -16px); background-position-y: -70px; } } </style>