CSS3animation 애니메이션 - 사례 인물 걷기 애니메이션: (3)

CSS 3 애니메이션
1. @keyframes 정의 키프레임 애니메이션 2, animation-name 애니메이션 이름 3, animation-duration 애니메이션 시간 4, animation-timing-function 애니메이션 곡선linear(균일속도)|ease(버퍼)|steps(걸음수)5, animation-delay 애니메이션 지연 6, animation-iteration-count 애니메이션 재생 횟수 n|infinite 7, animation-direction 애니메이션이 끝난 후normal|alternate 8을 역방향으로 복원할지 여부.animation-play-state 애니메이션 상태paused(정지)|running(운동)9, animation-fill-mode 애니메이션 전후 상태none(부족)|forwards(끝날 때 마지막 프레임에 머무름)|backwards(시작할 때 정의된 시작 프레임에 머무름)|both(전후 모두 적용)10, animation:name duration timing-function delay iteration-count direction;여러 속성을 동시에 설정
사례 인물 걷기 애니메이션


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    style>
head>
<body>
    <div class="box"><img src="images/walking.png">div>
body>
html>

CSS3animation 애니메이션 - 사례 인물 걷기 애니메이션: (3)

좋은 웹페이지 즐겨찾기