css3 animation和background-position製作動畫效果（animation steps）
阿新 • • 發佈：2019-01-30
<style type="text/css">
.userimg {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 100%;
background: url(img/bg_base_spr24.png) no-repeat -100px 0;
vertical-align: top;
margin-right: 10px;
}
.userimg:hover {
border-color: #ffc52a;
-webkit-animation: wakeup .2s steps(3) both;
animation: wakeup .2s steps(3) both;
}
@-webkit-keyframes wakeup {
0% {
background-position: -100px 0;
}
100% {
background-position: -250px 0;
}
}
@keyframes wakeup {
0% {
background-position: -100px 0;
}
100% {
background-position: -250px 0;
}
}
</style>
</head>
<body>
<span class="userimg"></span>
</body>animation: wakeup .2s steps(3) both; 動畫總時長0.2s，在3幀之間切換