CSS 전환,변환,애니매이션

전환

요소가 하나의 스타일에서 다른 스타일로 점진적 변화 하는 것

전환을 지정하기 위해 다음 2가지를 지정해야한다.

1.효과를 추가하고 싶은 CSS 속성을 지정한다.

2.효과의 지속 시간을 지정한다.

transition :width                 5s;

              전환되는속성      효과의 지속 시간

시간을 설정하지 않으면 0으로 효과x

전환 효과는 지정된 CSS속성의 값이 변경될 떄 시작된다.

다중 전환

예)

p{

width : 100px;

height : 50px;

border : 1px solid black;

background : yellow:

transition: width 5s height 5s border 5s, transform 5s;

}

p:hover {

width : 200px;

height : 100-px;

border : 10px solid red;

transform : rotrate(180deg);

}

CSS 변환

도형을 이동하고, 도형의 크기를 변환하며, 도형을 회전할 수 있다.

변환은 요소의 크기나 형태, 위치를 변환하는 효과이다.

transfrom: translate(10px, 10px) -평행이동

transfrom : rotate(45deg) - 회전

fransfrom : scale(2,1.2) 크기변환

fransfrom : skew(20deg, 10deg) - 비틀기 변환

fransfrom : matrix() - 일반적인 변환

기준 위치는 박스의 정상적인 위치 

복합변환

예)

div{

height:100px ; width:100px;

transfor:translate(80px, 80px) scale (1.5, 1,5)rotate(45deg);}

matrix()

메서드는 모든 2차원 변환을 하나로 결합한다.matrix()는 메서드는 6개의 매개변수를 가진다. 이는 rotate, scale, translate, skew를 나타낸다. 2D변환을 값 6개로 이루어진 변환 행렬에 저장한다. matrix(a,b,c,d,e,f)는 변환행렬 [a,b,c,d,e,f]에 해당된다.

CSS 3차원 변환

범위가 너무 많기에 간단한 예제만을 살펴보자.

메서드	설명
translate3d(x,y,z)	3차원 평행 이동
translateX(x)	3차원 평행 이동(x축)
translateY(y)	3차원 평행 이동(y축)
translateZ(z)	3차원 평행 이동(z축)
scale3d(x,y,z)	3차원 크기 변환
scaleX(x)	3차원 크기 변환(x축)
scaleY(y)	3차원 크기 변환(y축)
scaleZ(z)	3차원 크기 변환(z축)
rotate3d(x,y,z,angle)	3차원 회전 변환
rotateX(angle)	3차원 회전 변환(x축)
rotateY(angle)	3차원 회전 변환(y축)
rotateZ(angle)	3차원 회전 변환(z축)
perspective(n)	원근 변환

CSS3 애니메이션

키프레임을 이용해 CSS 특성 값의 변화를 지정할 수 있다. 키프레임(keyframe)이란 애니메이션 중간 중간에 객체의 위치와 크기를 지정해주는 프레임이다. 사람이 키프레임을 작성해주면 컴퓨터는 그 사이의 프레임을 자동 생성한다 이것이

키프레임 애니메이이션이다.이 기능은 GIF 애니메이션이나 플래시,자바스크립트로 대체가 가능하다.

@keyframe

키프레임의 위치는 퍼센트로 지정하며 각 키프레임에서 속성의 값을 지정하면 된다. 예를 들어 아래의 키프레임 정의에서는 속성 left와 속성 top의 값을 변화시키고 있다.

@keyframe           myanim

/* 키프레임지정  애니메이션이름지정 */

{

0% {left : 0px; top:0px;}

25% {left : 100px; top:0px;}

50% {left : 200px; top:0px;}

75% {left : 100px; top:0px;}

100% {left : 0px; top:0px;}

키프레임은 퍼센트(%) 단위로 지정한다 아니면 "from"과"to' 사용할 수도 있다. 0%는 from, 100%는 to와 같다. 0%는 애니메이션의 시작 100%는 종료점이다. 키프레임을 정의하였으면 애니메이션의 대상이 되는 요소에 다음과 같이 지정한다.

div{

animation: 2s myanim; /* 애니메이션 지속시간과 키프레임 규칙이름을 지정한다 */

animation-iteration-cunt: 10; /* 애니메이션 반복 횟수 */

]