본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 3 앞서 살펴본 animation의 여러 가지 속성들에 이어서 다양한 속성들에 대해서 더 알아보겠습니다. [CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 2 앞서서 animation 속성에 대해서 기초적인 개념을 살펴보았습니다. @keyframes 개념이 있다 보니, 사용법이 헷갈릴 수도 있으니 잘 상기하시기 바랍니다. [CSS] 8. 트랜지션과 애니메이션(3) - animation 속 nozeroslope.tistory.com ○ animation-direction : 애니메이션의 진행 방향 지정 애니메이션이 진행되는 순서는, 기본적으로 keyframes에서 정의한 from에서 to로 진행됩니다. 하지만, animation-direction 속성에서 정의된 값은 이 진행 방식에 변화를..
[CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 2 앞서서 animation 속성에 대해서 기초적인 개념을 살펴보았습니다. @keyframes 개념이 있다 보니, 사용법이 헷갈릴 수도 있으니 잘 상기하시기 바랍니다. [CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 1 CSS3에서는 앞서 배웠던 transition(트랜지션)을 통해서도 여러 애니메이션을 만들 수 있지만, animation(애니메이션) 속성을 활용해서도 자바스크립트 없이 더 쉽게 애니메이션을 구현할 수 있습니다. nozeroslope.tistory.com 그럼 앞선 아티클에서 다루었던 속성의 개념들을 상세하게 하나씩 살펴보도록 하겠습니다. ○ 애니메이션의 지점과 이름을 정의하는 @keyframes 우리는 이전 아티클에서 box라는 요소에 애니메이션을 적용할 때 box 요..
[CSS] 8. 트랜지션과 애니메이션(3) - animation 속성 1 CSS3에서는 앞서 배웠던 transition(트랜지션)을 통해서도 여러 애니메이션을 만들 수 있지만, animation(애니메이션) 속성을 활용해서도 자바스크립트 없이 더 쉽게 애니메이션을 구현할 수 있습니다. animation속성을 구현하는 구조는 약간 복잡하게 느껴질 수 있습니다. 우선, 어떤 요소에서 애니메이션을 구현할 때 해당 요소에서 기본적인 애니메이션의 속성을 transition과 비슷한 형태로 선언합니다. 그리고, animation 속성의 고유한 특징인 "key frames(키 프레임)"을 사용해 중간에 스타일이 바뀌는 지점을 따로 정의하게 됩니다. 예를 들어 구조를 설명해 볼까요? 요소 중 'box'가 있고 해당 box라는 요소의 속성과 적용하고자 하는 애니메이션이 아래와 같다고 가정해 ..
[CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 2 앞서 살펴본 내용에 이어서, CSS3의 트랜지션 속성들에 대해서 더 알아보도록 하겠습니다. [CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1 트랜지션(transition)이란 웹의 요소 스타일 속성이 시간에 따라 바뀌는 것을 의미합니다. 앞서 배웠던 transform에서의 단순한 형태나 속성 변화와 달리, 실제 애니메이션처럼 색상이 자연스럽게 변 nozeroslope.tistory.com (3) transition-timing-function : 트랜지션 속도의 곡선 지정 transition-timing-function 속성을 통해서는 트랜지션 효과가 적용되는 시작 / 중간 / 끝 지점에서의 속도를 지정하여 전체 속도 곡선을 조정할 수 있습니다. 미리 정해진 키워드, 혹은 ..
[CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1 트랜지션(transition)이란 웹의 요소 스타일 속성이 시간에 따라 바뀌는 것을 의미합니다. 앞서 배웠던 transform에서의 단순한 형태나 속성 변화와 달리, 실제 애니메이션처럼 색상이 자연스럽게 변하거나 사각형이 원형으로 테두리 색상과 함께 변신하듯이 부드럽게 변화하는 것을 예시로 들 수 있겠네요. ○ 트랜지션의 속성들 기본적으로 CSS3의 트랜지션을 실행할 때는, 여러 가지 속성 값을 설정해줘야 합니다. 다음과 같이 다섯 개의 트랜지션 속성이 존재하는데, 하나씩 세부적으로 어떤 성격을 갖는 속성인지 확인해 보도록 하겠습니다. 종류 설명 transition-property 트랜지션의 대상을 지정합니다. transition-duration 트랜지션을 실행할 시간을 지정합니다. transition-..
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 4 앞에서 살펴본 rotate( ) 함수와 관련해, 3D 회전의 예제도 좀 더 살펴보겠습니다. [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 3 앞서 살펴본 transform 속성의 함수들을 이어서 살펴보도록 하겠습니다. [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴 nozeroslope.tistory.com 아래 예제에서는 마우스 포인터를 올리면 x축, y축, z 축으로 각각 60도씩 회전(각각의 축에 방향벡터를 지정하고 60도 회전)하고, 여기에 트랜지션 효과까지 적용했습니다. 트랜지션은 추후 아티클에서 다룰 예정입니다. 앞서서 설명했던 perspective 속성은, 각..
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 3 앞서 살펴본 transform 속성의 함수들을 이어서 살펴보도록 하겠습니다. [CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴보았습니다. 이 transform 속성에서 사용되는 여러 종류의 함수들을 2차원, 3차원으로 분류하여 알아보기도 했습니다. 이제 nozeroslope.tistory.com ○ rotate( ) 함수 - 요소 회전 * 2차원 rotate( ) 함수 : rotate( ) 함수를 2차원에서 사용할 때에는, 회전 각도만 지정해 주면 됩니다. 회전 각도가 양수일 경우 오른쪽 시계 방향, 음수일 경우 왼쪽 반시계 방향으로 회전하게 됩니다. 여기서 사용하는 각도의 값은 degree나 ra..
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2 앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴보았습니다. 이 transform 속성에서 사용되는 여러 종류의 함수들을 2차원, 3차원으로 분류하여 알아보기도 했습니다. 이제부터는 각각의 transform 속성의 함수들에 대해서 상세하게 알아보도록 하겠습니다. ○ translate( ) 함수 - 요소 이동 translate( ) 함수는, x축이나 y축 또는 양쪽 방향으로 이동 거리를 지정하면, 해당 요소가 그만큼 이동하는 함수입니다. 사용하는 형태는 아래와 같습니다. 참고로 x값이 양수면 오른쪽으로, y값이 양수면 아래쪽으로 이동합니다. transform: translate(tx, ty) /* x축으로 tx만큼, y축으로 ty만큼 이동 */ transform: trans..

티스토리툴바