Animation 동작 효과 주기

둠칫

· 3년 전 · 조회 1565 1565 · 댓글 2 2

animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
animation-name	애니메이션 효과의 이름을 설정함.
animation-duration	애니메이션 효과를 재생할 시간을 설정함.
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정함.
animation-direction	애니메이션의 진행 방향을 설정함.
animation-timing-function	애니메이션 효과의 시간당 속도를 설정함.
animation-fill-mode	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정함.
animation-play-state	애니메이션 효과의 재생 상태를 설정함.

예시>

HTML

  <div class="ani1"></div>
  <div class="ani2"></div>

CSS

.ani1{width:100px; height: 100px; margin: 50px auto 0 auto; background: #39e2f2;}
        .ani1:hover{animation: ani 1s ease-in-out .5s 2 alternate;}
        @keyframes ani{
            from{transform: scale(1) translate(0);}
            to{transform: scale(1.5) translate(20%);}
        }
.ani2{width:100px; height: 100px; margin: 100px auto 0 auto; background: #cf243f;}
        .ani2:hover{animation: ani 1s linear infinite alternate;}
        @keyframes ani{
            from{transform: scale(1) translate(0);}
            to{transform: scale(1.5) translate(20%);}
        }

속성값 참고>

ease-in	기본형으로 시작이 빠르게
ease-in-out	시작과끝이 빠르게
lieaner	일정속도
ease-out	끝이 빠르게

alternate	앞에부터 뒤까지 진행하고 다시 뒤에서 앞으로 진행
normal	앞에서부터 뒤로 진행
reverse	뒤에서 앞으로 진행

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

star6161

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

도움됩니다 감사합니다!! 할때마다 복붙이었는뎅,,

annie1

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

감사합니다.

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
977	CSS	수직 탐색 막대 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1661
976	CSS	Vertical Navigation Bar [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2114
975	CSS	Navigation Bars	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1608
974	CSS	[CSS] Float : left, right, inherit, none.	이희현 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	5248
973	CSS	CSS 투명한 호버 효과 2	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3247
972	CSS	CSS 투명한 호버 효과	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3046
971	CSS	CSS 불투명도 / 투명성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2126
970	HTML	레이아웃용 테이블에<th>나scope이 사용될 경우에는 오류임.	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3038
969	HTML	IE9 이전 버전에서 Canvas 사용가능하도록 하는 js 라이브러리 [2]	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3518
968	CSS	CSS 결합 자 - 인접한 형제 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2439
967	CSS	CSS 결합 자 - 하위 선택자	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1931
966	CSS	CSS 결합 자 - 하위 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1694
965	CSS	CSS 레이아웃 - 이미지 센터하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2695
964	CSS	CSS 레이아웃 - 가운데 맞춤 텍스트	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2576
963	CSS	CSS 레이아웃 - 가운데 정렬 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3108
962	CSS	float : The clearfix Hack(clearfix 해킹)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1807
961	CSS	float : The clear Property(clear 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1497
960	CSS	CSS 레이아웃 - 플로팅 및 삭제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2269
959	CSS	CSS Overflow auto	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1889
958	CSS	CSS Overflow Hidden	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2144
957	CSS	CSS Overflow Visible	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2185
956	CSS	css position Overlapping Elements(겹치는 요소들)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2047
955	CSS	css position: absolute;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2210
954	CSS	css position: fixed;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2334
953	CSS	CSS 레이아웃 - position: relative; 속성 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2888
952	CSS	CSS 레이아웃 - position static 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2495
951	CSS	너비, 최대 너비 및 여백 사용 : auto; 사용	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2376
950	CSS	display:block	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1854
949	CSS	Display: none;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1904
948	CSS	display 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2089