css

CSS animation 속성 이용해서 swing 화살표 만들기

핑계/ editor

  • 0 comments
  • 2,318 views
  • 2017년 10월 11일

CSS animation 속성을 이용해서 swing 화살표를 만들어 보아요 ~

요즘 아래예제와 같은 버튼들을 많이 볼 수 있죠??
‘화살표 아이콘’이 무한반복으로 움직이는 게 키포인트인데요.

CSS animation 속성을 이용해서 만들어볼께요~

 

 

1. CSS로 버튼 모양 만들기


 

Markup

<span></span>은 ‘화살표 이미지 아이콘’을 넣을 자리입니다.

<body>
<a href="#" class="btn-right">
       밀어서 잠금해제<span></span>  // 화살표 아이콘
</a>
</body>

CSS

.btn-right {
        font-family: AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
        position: relative;
        font-weight: 300;
        font-size: 20px;
        letter-spacing: -0.02em;
        display: inline-block;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 28px;
        padding: 0.85em 2.25em 0.9em 1.25em;
}
.btn-right span {         /* 화살표 아이콘 */ 
        position: absolute;
        top: 23px;
        width: 11px;     /* 화살표 아이콘 가로길이 */ 
        height: 17px;     /* 화살표 아이콘 세로길이 */ 
        display: inline-block;
        margin-left: 9px;
        background-image: url('arrows.png');     /* 하위 브라우저용 img */
        background-image: url('arrows.svg');     /* svg 파일 적용 */
}

HTML5AROUND on html5around.com

이제 준비가 끝났네요.
CSS animation 속성을 이용해서 화살표 아이콘이 움직이게 해볼께요

 

 

2. CSS animation 속성 이용해서 화살표 아이콘 움직이기


 

① CSS animation 기본문법에 대해서 알아봅시다.

css animation 기본문법은 아래와 같습니다.

@keyframes 애니메이션이름 {
      0% { 애니메이션 시작점의 css 설정 }
    100% { 애니메이션 끝점의 css 설정 }
}

animation: 애니메이션이름 | 시간 | 가속도 | 지연시간 | 반복횟수 | 방향지정; 
                              /* 생략가능  생략가능             생략가능 */
  • 애니메이션이름 : @keyframes에서 정의한 애니메이션을 호출합니다.
  • 시간 : 0% ~ 100% 까지의 애니메이션 실행시간입니다. 초나 밀리초 단위로 설정합니다. 예) 0.5s, 100ms
  • 가속도 : 애니메이션에서 사용할 가속도를 지정합니다. 기본값은 ease 입니다.
  • 지연시간 : 애니메이션 시작되기 전 지연시간을 지정합니다. 생략하면 지연시간 없습니다.
  • 반복횟수 : 애니메이션 반복횟수를 지정합니다. infinite 설정 시 무한반복 합니다.
  • 방향지정 : 애니메이션 실행방향을 지정합니다. 기본값은 normal 입니다.
                    normal(0% ~ 100% 반복실행) / alternate(0%~100% 완료시 다시100%~0% 반복)

 

② 우선 키프레임으로 애니메이션의 변화지점을 설정합니다.

위의 문법을 기준으로 animation 을 만들어줍니다.
저는 margin-left값의 변화로 화살표 아이콘을 가로방향으로 움직이게 할 예정입니다.

@keyframes horizontal {         /* 애니메이션이름 */ 
        0% {margin-left: 9px;}
        50% {margin-left: 11px;}
        100% {margin-left: 9px;}
}

 

③ 애니메이션의 지속시간, 가속도, 반복횟수등 움직임을 설정합니다.

추가 CSS

@keyframes 로 설정한 애니메이션이름을 호출해줍니다.
저는 0.7초 동안 ease-in-out의 가속도 값으로 무한반복하는 화살표 아이콘을 만들 예정입니다.

.btn-right span { 
        position: absolute;
        top: 23px;
        width: 11px; 
        height: 17px; 
        display: inline-block;
        margin-left: 9px;
        background-image: url('arrows.png');
        background-image: url('arrows.svg');
        animation: horizontal 0.7s ease-in-out infinite;     /* 추가 CSS */  
}
@keyframes horizontal {         
        0% {margin-left: 9px;}
        50% {margin-left: 11px;}
        100% {margin-left: 9px;}
}

HTML5AROUND on html5around.com

 

 

3. 최종 코드


 

Markup

<body>
<a href="#" class="btn-right">
       밀어서 잠금해제<span></span> 
</a>
</body>

CSS

.btn-right {
        font-family: AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif;
        position: relative;
        font-weight: 300;
        font-size: 20px;
        letter-spacing: -0.02em;
        display: inline-block;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 28px;
        padding: 0.85em 2.25em 0.9em 1.25em;
}
.btn-right span { 
        position: absolute;
        top: 23px;
        width: 11px; 
        height: 17px; 
        display: inline-block;
        margin-left: 9px;
        background-image: url('arrows.png'); 
        background-image: url('arrows.svg'); 
        animation: horizontal 0.7s ease-in-out infinite;
}
@keyframes horizontal {         
        0% {margin-left: 9px;}
        50% {margin-left: 11px;}
        100% {margin-left: 9px;}
}

 

 

4. 마치며


 

animation @keyframes 값을 다르게 해서 위아래로 움직이는 화살표 아이콘도 만들어보세요.

HTML5AROUND on html5around.com

수고하셨습니다 ~

CSS가 아닌 jQuery로 swing 화살표 만들고 싶으신 분들은
왕초보디자이너를 위한 ‘animate()’ 이용해서 위아래 무한반복 swing 화살표 만들기
튜토리얼을 읽어주세요^^

핑계

댓글 먹고 살아요~

Leave a Reply

avatar