제로이즈 상상플러스 - ZEROIS IMAGINATION PLUS

  • 월간 검색어
  • 최고 검색어
  1. 식스틴 25
  2. 뮤직비디오 249
  3. 제로이즈 31
  4. 부드러운노래 30
  5. 사무용가구
  6. 자바스크립트시계 28
  7. 잠들게하는 244
  8. 무료폰트
  9. 내마음대로 242
  10. 이쁜사이트 241
기간 : ~
  1. 식스틴 2
  2. 제이쿼리 3
  3. jquery 4
  4. 2012 5
  5. 케이팝스타 6
  6. 무료 7
  7. 플러그인 8
  8. css 9
  9. 주간아이돌 10
  10. 강좌 7
기간 : ~


  • twitter facebook me2day 요즘
  • 제로이즈 | 2019.09.23 04:24 | 조회 187

    나두 자주 안써 해깔리는 명령어 속성....

    그 중에 animation 어느 분이 잘 정리해서 일단 이렇게 퍼와 봐요...!!


    CSS 애니메이션을 만드려면 animation 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 

    이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 

    애니메이션의 중간 상태는 아래에서 다룰 @keyframes 규칙을 이용하여 기술합니다. 


    animation 속성의 하위 속성은 다음과 같습니다.

    animation-delay 

    • 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다. 

    animation-direction 

    • 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. 

    animation-duration 

    • 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. 

    animation-iteration-count 

    • 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다. 

    animation-name 

    • 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다. 

    animation-play-state 

    • 애니메이션을 멈추거나 다시 시작할 수 있습니다. 

    animation-timing-function 

    • 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다. 

    animation-fill-mode 

    • 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.


    출처: https://webclub.tistory.com/362 [Web Club]
    수정 답변 삭제 목록
    팁n펌 낙서장
    번호 제목 작성자 작성일 조회
    공지 팁n펌 낙서장 이용안내! 2013.10.04 8244
    109 [자바스크립트]실시간 시계 표시하기 제로이즈 2020.02.04 60
    108 [Html/CSS]네이게이션형 페이지 위치표기바 제로이즈 2019.10.15 198
    107 [어도비]초보를 위한 그레이디언트 색상50가지사진첨부파일 제로이즈 2019.10.08 200
    >> [Html/CSS]css animation 속성 알아보기 제로이즈 2019.09.23 188
    105 [자바스크립트]비밀번호, 이메일 , 전화번호, 핸드폰 정규식 제로이즈 2019.08.27 374
    104 [제이쿼리]텍스트박스(input text)에 숫자만 입력 가능 제로이즈 2019.08.27 287
    103 [제이쿼리]깔끔한 jquery+css 탭 메뉴입니다. 제로이즈 2019.07.08 682
    102 [제이쿼리]스크롤 페이징 (무한 스크롤 Infinite Scroll) 제로이즈 2019.06.12 755
    101 [PHP/MySql]문자인증 - 카페24 문자서비스 이용 제로이즈 2019.05.31 788
    100 [PHP/MySql]사진에서 EXIF 정보 추출사진 제로이즈 2019.05.10 512
    99 [제이쿼리]Gear slider - css/jquery 제로이즈 2018.10.23 573
    98 [Html/CSS]css range slider 제로이즈 2018.10.23 623
    97 [Html/CSS]css로 삼각형 만들기 제로이즈 2018.09.28 489
    96 [제이쿼리]터치스와이프 참고 제로이즈 2018.09.21 458
    95 [제이쿼리]이미지 오토슬라이스사진 제로이즈 2018.09.06 458
    94 [제이쿼리]Swiper 마우스 액션 슬라이드 정지/플래이 제로이즈 2018.07.28 4002
    93 [제이쿼리]모바일 가로/세로 회전 감지 제로이즈 2018.06.11 487
    92 [제이쿼리]제이쿼리 에이작스를 활용한 스크롤페이징 참고자료 제로이즈 2018.03.22 615
    91 [제이쿼리]마우스 드래그 슬라이드 기본사진 제로이즈 2018.03.15 537
    90 [제이쿼리]부드러운 탑 이동 버튼 만들기 제로이즈 2018.03.13 529
    다음 글쓰기
    • 오늘 방문
    • 49
    • 어제 방문
    • 180
    • 이번달 방문
    • 1,023
    • 지난달 방문
    • 6,585