You cannot see this page without javascript.

조회 수 203 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

{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

어떠셨나요? 0.00 (0명)
0
0
0
0
0
    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tip

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
51 커서(cursor) 모양 정리 마우스 커서 모양에 대해 알아보겠습니다. 보통 cursor 작업을 하면 pointer 위주로 작업을 합니다. 하지만 pointer 외에 아주 많는 cursor 가 있습니다. 그종류... file 팔공산 2018.07.19 23
50 webkit-animation 적용 방법 css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. 스케치북5 게시판에 댓글달기 추천 문구... file 팔공산 2018.01.31 119
» 각종 css3를 자동으로 만들어주는 사이트 {CSS3} animation / transform / transition 각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/index.html * animation 참고 사이트 http://dan... 팔공산 2017.11.07 203
48 html에 사용되는 Character Entities(특수기호) #ce { font: .8em Monaco; display: block; } #ce tr { background: #EEE; display: inline-block; text-align: center; width: 10em; height: 10em; margin: .5e... file 팔공산 2017.11.04 112
47 이미지 마우스 hover시 좌우 기울이기 아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드 .h img { border:1px solid #D4D4D4; padding:5px; } .h img:hover{ border:1px solid #666666; filt... file 팔공산 2017.10.27 150
46 모바일웹에서 스마트폰으로 전화바로연결 코드 모바일웹(스마트폰)에서 자동으로 전화 걸기 태그 는 아주 간단합니다 아래 코드만 입력하면 끝입니다. 스마트폰에서 터치하면 자동으로 등록된 전화번호가 키패... file 팔공산 2017.06.16 518
45 반응형 CSS 테이블 .head { background-color: #327a81; color: white; font-size: 1.5em; padding: 1rem; text-align: center; text-transform: uppercase;} .head1 { display: non... file 팔공산 2017.06.13 430
44 실시간 환율조회 html 외환은행과 하나은행이 합병되면서 기존의 실시간 환율조회 html이 작동을 하지를 않아서 정상적으로 작동하는 html을 올립니다. <center><iframe frameborder="o... file 팔공산 2017.04.18 271
43 HTML 만으로 마우스오버 구현하는 방법 [URL링크시] <a href="#" onMouseOver="this.innerHTML='마우스오버시 변경되는 텍스트'" onMouseOut="this.innerHTML='마우스가 범위를 벗어날시 변경되는 텍스... file 팔공산 2017.01.07 3650
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 476
41 float 속성을 가진 div 100% 설정하는 방법 css작업하다보면 간혹 곤욕스러운 경우가 많습니다. 대표적인게 float 속성인데요.. div, p 태그는 대표적인 block속성을 가지고 있는데요.. 이게 float을 만나면... file 팔공산 2016.04.21 318
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 958
39 CSS3 border-radius 이해하기 border-radius가 출현하면서 웹 디자이너들은 정말 열광했습니다 . 이전까지는 둥근모서리를 만들기 위해 엄청난 편법과 기법들이 난무했습니다. 이미지를 이용해... file 팔공산 2016.04.07 205
38 IE 버젼별로 css 따로 적용하는 방법 웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. ... file 팔공산 2011.02.17 11422
37 마퀴태그의 기본 팔공산 2010.02.06 9661
36 이미지 바꾸기 소스 1 감로수 2009.06.06 10139
35 익스6에서만 작동되게하는 css구문 팔공산 2009.02.19 9821
34 CSS 기초 깨우치기 1 팔공산 2008.10.12 9155
33 CSS 사용시 익스플로러 버그 해결하기 보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 ... file 팔공산 2008.07.19 8705
32 CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에... 1 file 팔공산 2008.07.19 12152
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...