조회 수 385 추천 수 0 댓글 0

{CSS3} animation / transform / transition 

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

http://www.css3maker.com/index.html

img_001.jpg

 

* 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

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 168
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 318
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 423
54 DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 548
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 171
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 287
51 커서(cursor) 모양 정리 file 팔공산 2018.07.19 95
50 webkit-animation 적용 방법 file 팔공산 2018.01.31 208
» 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 385
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 301
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 222
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1292
45 반응형 CSS 테이블 file 팔공산 2017.06.13 643
44 실시간 환율조회 html file 팔공산 2017.04.18 761
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 5248
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 1172
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 375
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1372
39 CSS3 border-radius 이해하기 file 팔공산 2016.04.07 282
38 IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 11976
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...