이 영역을 누르면 첫 페이지로 이동
소소한 인생 블로그의 첫 페이지로 이동

소소한 인생

페이지 맨 위로 올라가기

소소한 인생

css3 animation / tranform / transition

  • 2018.07.15 23:34
  • 프로그래밍

각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/css3-animation.html


참고 사이트 http://daneden.github.io/animate.css/



css3 animation



- css3 animation을 적용하기 위해선 속성 변화를 주기 위해 키프레임 생성! (접두어 써야함)

  • animation-name: 애니메이션이름
  • animation-duration : 진행시간(2s,3s...)
  • animation-iteration-count : 반복횟수(infinite:무한반복)
  • animation-timing-function : 속도형태
  • animation-direction : 방향지정
  • animation-play-state : 애니메이션 진행상태
  • animation-delay : 애니메이션 시작전 지연시간
  • animation-fill-mode : 애니메이션이 끝났을 때 요소의 위치(자세한 속성은 아래에)


- 속도형태 속성

  • ease (시작과 종료 부드럽게)
  • linear (일정하게)
  • ease-in (서서히 시작)
  • ease-out (서서히 종료)
  • ease-in-out (서서히 시작하여 서서히 종료)


- 방향지정 속성

  • normal (정방향)
  • reverse (to에서 시작하여 from으로 끝남)
  • alternate (처음은 정방향 그 다음은 역방향)
  • alternate-reverse (처음은 역방향 그 다음은 정방향)

- 애니메이션 진행상태 속성

  • running (재생중)
  • paused (일시정지중)

- 애니메이션 끝났을 때 요소의 위치 속성

  • forwards (애니메이션 시작 전 까지는 원래 위치에서 대기 / 요소가 애니메이션 끝나는 위치에서 멈춤)
  • backwards (페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동 / 끝나면 원래 위치로 돌아감)
  • both (위 둘 효과를 모두 적용)
  • none (애니메이션 시작 전 까지는 원래 위치에 고정 / 끝나면 그 위치로 다시 돌아감 = 기본상태)

- 키프레임

@keyframes 애니메이션이름 {
    0% {}
    5% {}
    //각 %마다 움직임을 주고 싶으면 {이 안에 해당하는 값을 써주면 됨}
}


한 줄로 정의할 경우

animation:rotateWord 18s linear infinite 0s;
  • animation-name: rotateWord
  • animation-duration : 18s
  • animation-iteration-count : infinite
  • animation-timing-function : linear
  • animation-delay : 0s

css3 transform



- 회전, 확대/축소, 기울임, 위치변경과 같은 변경 처리 (접두어 써야함)


1. rotate 회전

- 각도의 범위는 0~360도중 하나의 각도 선택할 수 있으며, 마이너스 각도는 시계 반대 방향으로 회전 할 수 있음

transform:rotate(45deg);


2. scale 확대/축소

- 이미지(개체)의 크기를 조절할 수 있으며, 비율을 지정하여 크기를 조절하고 n배로 확대 수치 지정/ 소수점도 가능

transform:scale(1.5);
transform:scaleX(3); //가로의 3배 확대 / Y로 쓰면 세로의 3배 확대


3. skew 기울임

- 주어진 각도로 기울일 수 있으며, X축은 좌/우로 Y축은 상/로 기울이는 효과를 줌

- X축 : + 각도는 우측 / - 각도는 좌측

- Y축 : + 각도는 아래쪽으로 / - 각조는 윗쪽

transform:skewX(+-10deg);


4. translate 위치이동

- 위치를 이동시킬 수 있으며, 좌/우/상/하로 위치 조정

- scale과 마찬가지로 X축, Y축으로 지정가능함

transform:translate(10px, 20px); tranform:translateX(10px);



css3 transition



- 마우스를 클릭하거나 hover 상태에 변화를 주는 것

  • transition-property : 색상이나 위치 등 변화의 대상이 되는 css 속성 지정
  • transition-duration : 변화할 때 걸리는 시간을 초단위로 지정
  • transition-delay : 변화되기 전 시간을 초단위로 지정
  • transition-timing-function : 진행시간 (속성값은 animation 속도형태 속성과 동일)


한 줄로 정의할 경우

transition:opacity 2s 1s ease;
  • transition-property : opaticy
  • transition-duration : 2s
  • transition-delay : 1s
  • transition-timing-function : ease


저작자표시 비영리 변경금지 (새창열림)

'프로그래밍' 카테고리의 다른 글

크롬으로 모바일웹 디버깅하기  (3) 2018.07.18
Math.random()  (0) 2018.07.17
jquery input 계산하기(소수 반올림, comma(,) 찍기, 숫자만 입력하기)  (0) 2018.07.01
jquery checkbox 전체 갯수와 선택된 갯수 구하기  (1) 2018.06.21
jquery 백분율 계산  (0) 2018.06.14

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • 크롬으로 모바일웹 디버깅하기

    크롬으로 모바일웹 디버깅하기

    2018.07.18
  • Math.random()

    Math.random()

    2018.07.17
  • jquery input 계산하기(소수 반올림, comma(,) 찍기, 숫자만 입력하기)

    jquery input 계산하기(소수 반올림, comma(,) 찍기, 숫자만 입력하기)

    2018.07.01
  • jquery checkbox 전체 갯수와 선택된 갯수 구하기

    jquery checkbox 전체 갯수와 선택된 갯수 구하기

    2018.06.21
다른 글 더 둘러보기

정보

소소한 인생 블로그의 첫 페이지로 이동

소소한 인생

  • 소소한 인생의 첫 페이지로 이동

검색

메뉴

  • 홈
  • 태그

카테고리

  • 분류 전체보기 (174)
    • 일기 (52)
    • 여행 (36)
    • 추억 (64)
    • 프로그래밍 (22)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • #1박2일
  • #맛집
  • #CSS
  • #sublime text
  • #등산
  • #몽골
  • #공연
  • #13박14일

정보

_sunny의 소소한 인생

소소한 인생

_sunny

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © _sunny. Designed by Fraccino.

티스토리툴바