{CSS3} animation / transform / transition 

각종 css3를 자동으로 만들어주는 사이트

http://www.css3maker.com/css3-animation.html

 

 

* animation

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

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

animation-name: 애니메이션이름
animation-duration: 진행시간(2s,3s...)
animation-iteration-count: 반복횟수(infinite:무한반복)
animation-timing-fonction: 속도형태(자세한 속성값은 밑에 다시 세세하게 씀!)
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% {}
  ... %는 각자 효과를 주고 싶은 곳에 지정하며, 각 %마다 움직임을 주고 싶으면 그 안에 {해당하는 값을 써주면 됨}
}

한줄 정의가 가능하다
ex) animation:rotateWord 18s linear infinite 0s;
풀어서 정의 하자면
ex)
animation-name:rotateWord;
animation-duration:18s;
animation-iteration-count:infinite;
animation-timing-fonction:linear;
animation-delay:0s;

 

* transform

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

1. rotate 회전
- 각도의 범위는 0~360도중 하나의 각도 선택할 수 있으며, 마이너스 각도는 시계 반대 방향으로 회전 할 수 있음
ex) transform:rotate(45deg);

2. scale 확대/축소
- 이미지(개체)의 크기를 조절할 수 있으며, 비율을 지정하여 크기를 조절하고 n배로 확대 수치 지정/ 소수점도 가능
ex) transform:scale(1.5);
- 비율로 확대/축소가 가능하나, 가로 세로 방향도 지정 가능 함
ex) transform:scaleX(3); 가로의 3배 확대 / Y로 쓰면 세로의 3배 확대

3. skew 기울임
- 주어진 각도로 기울일 수 있으며, X축은 좌/우로 Y축은 상/하로 기울이는 효과를 줌
- X축에 + 각도는 우측 / - 각도는 좌측
- Y축에 + 각도는 아래쪽으로 / - 각도는 윗쪽
ex) transform:skewX(+-10deg);

4. translate 위치이동
- 위치를 이동시킬 수 있으며, 좌/우 상/하로 위치 조정
- scale과 마찬가지로 X축, Y축으로 지정가능함
ex) transform:translate(10px, 20px); transform:translateX(10px);\

 

* transition

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

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

한 줄 정의가 가능하다
ex) transition:opacity 2s 1s ease;
이렇게 정의할 경우 풀어서 쓴다면,

ex)
transition-property:opacity;
transition-duration:2s;
transition-delay:1s;
trasition-timing-function:ease;

 

출처 : http://blog.naver.com/bbol0623/220385803579

글쓴이 이온디

profile
[홈페이지 제작의 바른길, 이온디]
*XE마켓을 운영하고 있습니다.*
http://eond.com/shop
(워드프레스, XE, 그누보드, 제로보드, 카페24 쇼핑몰, 우커머스, Shopify, 영카트, 누리고, 가비아 퍼스트몰, 홈페이지제작의뢰상담 전문.)

서버에 요청 중입니다. 잠시만 기다려 주십시오...