강의를 참고해 객체에 간단한 애니메이션을 주는 방법에 대해 알아봅니다.
먼저 CSS에는 애니메이션에 쓰일 Animation 속성이 있는가 하면 간단하게 바꿀 수 있는
Transition 과 Transform 속성이 있습니다.
Transition은 속성을 서서히 변화시키는 효과, Transform은 객체를 회전시키거나 크기 조절, 이동, 기울임 등을 지정할 수 있는 속성입니다.
Introduction
Transition
transition : property timing-function duration delay | initial | inherit- property : 속성을 정할 수 있습니다. ex) width, background 등을 포함할 수 있습니다.
- timing-function : 트랜지션의 속도를 지정합니다.
- duration : 총 지속될 시간을 지정합니다.
- delay : 시작 부분에서 연기시킬 시간을 지정합니다.
- initial : 기본값 | inherit : 부모요소 상속
Transform
1. transform:scale() - X축이나 Y축으로 확대나 축소시킬 수 있는 속성
transform:scaleX | scaleY | scale(x축 비율, y축 비율)- 비율은 0.5, 1.0, 1.5 등 지정할 수 있습니다.
0.5를 지정하면 50%크기로 줄어듭니다. 2.0을 지정하면 200%크기로 커집니다.
2. transform:rotate() - 회전시킬 수 있는 속성
transform:rotateX(?deg) | rotateY(?deg) | rotate(?deg)- 회전시킬 각도는 45deg, 60deg 등으로 지정할 수 있고, 양수로 표현하게되면 우측으로 회전하며,
음수(-45deg)로 표현하게 되면 좌측으로 회전합니다.
3. transform:translate() - X축이나 Y축으로 이동시킬 수 있는 속성
transform:translateX(Npx) | translateY(Npx) | translate(Npx, Npx);- 이동할 방향을 지정합니다. 10px, 20px 등 지정할 수 있으며 -10px, -20px로 지정할 수도 있습니다.
4. transform:skew() - X축이나 Y축으로 기울일 수 있는 속성
transform:skewX(Ndeg) | skewY(Ndeg) | skew(Ndeg, Ndeg)- rotate() 속성과 동일하게 각도를 지정할 수 있습니다.
5. transform-origin: x축 y축;
- 1~4번 속성이 요소의 중심을 기준으로 효과가 지정되었다면, transform-origin 속성은 그 기준점을 변경할 수 있습니다. ex) px, %, left, center, right
예제 코드 (transition_transform.html)
<!DOCTYPE html>
<html>
<head>
<title>Practice1</title>
<style>
div{
position:absolute;
margin:20px;
width:200px;
height:200px;
background:yellow;
border: 1px solid black;
transition-property: width background;
transition-duration: 0.5s;
}
div:hover{
width: 200px;
transition-timing-function: linear;
opacity: 0.0;
}
div#box1:hover{
width:200px;
opacity: 1.0;
background: yellow;
}
div#box2:hover{
margin-top:50px;
margin-left:50px;
width:140px;
height: 140px;
opacity: 1.0;
transform: rotate(-45deg);
background: green;
}
</style>
</head>
<body>
<div id="box1"> </div>
<div id="box2"> 박스 안에 마우스를 올리면 무엇이 보일까요? </div>
</body>
</html>Result
CSS의 간단한 애니메이션에 대해 알아보았습니다. 예제에서 쓰인 hover 속성은 마우스가 올라갔을때 지정할 속성을 의미합니다. 예제의 실행 결과로 도형 2개를 겹치게 한 후 앞에 보이는 도형에 hover속성을 지정하여 회전, 색변경을 지정한 예제였습니다. scale을 통해 도형 크기를 확대하거나 축소시킬 수도 있습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS] 부트스트랩(Bootstrap) 활용 (0) | 2022.06.11 |
|---|---|
| [CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design) (0) | 2022.04.27 |
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
