728x90
<div class="bs-docs-section">
<h2 id="intro2" class="page-header">timing-function <button type="button" class="btn btn-warning start2">Start</button></h2>
<div class="sample">
<h3><span></span><em class="sr-only">border-radius</em></h3>
<div class="timing bg2">
<div class="timing6"><span>step-start</span></div>
<div class="timing7"><span>step-end</span></div>
<div class="timing8"><span>steps(4, start)</span></div>
<div class="timing9"><span>steps(4, end)</span></div>
<div class="timing10"><span>steps(10, start)</span></div>
<div class="timing11"><span>steps(10, start)</span></div>
</div>
</div>
<pre class="line-numbers language-css"><code>.timing6.show {animation: move 4s 1 step-start;}
.timing7.show {animation: move 4s 1 step-end;}
.timing8.show {animation: move 4s 1 steps(4, start);}
.timing9.show {animation: move 4s 1 steps(4, end);}
.timing10.show {animation: move 4s 1 steps(10, start);}
.timing11.show {animation: move 4s 1 steps(10, end);}
</code></pre>
<style>
.step {
height: 700px;
background: #3b0a76;
position: relative;
}
.step .stepbox {
width: 800px; height: 600px;
background: url(img/cuteheart.jpg);
border-radius: 0;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
/* 1초에 24프레임으로 끊어서 보여준다 */
animation: ani 1s steps(24, start) infinite;
}
.step .stepbox.start {
animation-play-state: running;
}
.step .stepbox.stop {
animation-play-state: paused;
}
@keyframes ani {
0% {background-position: 0 0;}
100% {background-position: -19200px 0;}
}
.stepBtn {
position: absolute; left: 15px; top: 20px;
}
.stepBtn a {
background: #e16162; color: #fff;
padding: 10px;
margin: 3px;
border-radius: 3px;
}
</style>
<div class="sample">
<h3><span></span><em class="sr-only">border-radius</em></h3>
<div class="timing step">
<div class="stepbox"></div>
<span class="stepBtn">
<a href="#" class="stepBtnStart">Start</a>
<a href="#" class="stepBtnStop">Stop</a>
</span>
</div>
</div>
</div>
댓글