1. Transition
- Transition은 엘리먼트 상태의 변화를 애니메이션을 통해 표현하는 방법이다. (아래 사진참고)
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: none;
/* transition: background-color 3s ease-in-out, color 2s ease-in-out; */
transition: all 2s ease-in-out;
}
a:hover {
color: tomato;
background-color: wheat;
border-radius: 10px;
}
</style>
</head>
<body>
<a href="#">Go Home</a>
</body>
</html>- Transition 속성값을 사용하기 위해서는 몇가지 규칙이 있다. 먼저 형식이다.
형식) transition: 속성/all 시간 ease-in/ease-out/ease-in-out
- 그 다음은 Transation을 작성해야 되는 위치와 작성 규칙이다.
-
Transition을 사용하기 위해서는 반드시 기존상태와는 다른 상태가 적용되는 CSS가 작성되어 있어야 한다.
-
Transition은 반드시 root CSS에 작성되어야 한다. a{}에 적혀야지 a:hover{}에 적히면 안된다. hover에 입력하면 마우스가 올려져 있는 동안은 trasition이 작동을 하다가 마우스가 없어지면 바로 transition 기능이 사라진다.
- 각각의 요소에 다른 transition적용하고 싶다면 콤마(,)를 이용해 구분해준다.
형식) transition: 속성1 시간 ease-in/out/in-out, 속성2 시간 ease-in/out/in-out
- Transition 작성 형식에 보면 ease-in/ease-out/ease-in-out이라는 속성값이 있다. 이는 변화속도를 의미한다.
- ease-in: 상태변화 시작 시 변화속도가 가속된다. (빠르게 변화)
- ease-out: 상태변화가 거의 완료된 부분에서 변화속도가 감소된다.
- ease-in-out: 상태변화 시작 시 변화속도가 가속되다가 거의 완료되는 부분에서 변화속도가 감소한다.
- 말로 들었을 때에는 잘 모르겠으니 아래 사이트 링크로 들어가서 직접 여러가지를 체험해보자.
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
2. cubic-bezier
- Transition의 default로 사용할 수 있는 속성값은 linear/ease-in/ease-out/ease-in-out, 이렇게 총 4가지 이다. 이 각각의 속성값에 대한 설명을 읽어보면 Equivalent to cubic-bezier라는 설명을 볼 수 있다. (아래 사진참고)
- cubic-bezier라는 것은 Transition을 구성하는 속성값 중 하나인데, 상태변화의 속도를 직접 설정할 수 있는 속성값이다.
- 위에 적어놓은 링크에 들어가면 다양한 cubic-bezier의 세팅과 적용했을 때의 속도변화를 직접 확인해 볼 수 있다.
- 위의 사진처럼, 사용자가 선택한 Transition에 따라 다른 수치의 cubic-bezier가 출력된다. 해당 Transition을 사용하고 싶다면 cubic-bezier의 값을 CSS에 복붙하면 된다.
3. Transformation
- 단어의 뜻 그대로, 엘리먼트를 변형시키는 기능을 가진 속성이다. (아래 사진참고)
<style>
img {
border: 5px solid black;
border-radius: 50%; /* 50%는 원이 된다.*/
transform: rotateY(65deg) rotateX(20deg) rotateZ(20deg);
}
</style>
</head>
<body>
<img src="logo.png"/>
</body>
</html>- 위의 사진과 코드를 기반으로, 사진을 다양한 방식으로 회전시키는 등의 표현이 가능하다. 위의 코드블럭에는 transform에 rotate속성 값만 적용했으나, 이 외에도 다양한 transform 속성값이 존재한다.
* 중요한 점 - transformation은 다른 레이어에서 이뤄지기 때문에 다른 요소를 기존 위치에서 밀어내거나 하는 등 영향을 끼치지 않는다. 기존의 요소가 안보이게 가려지거나 겹칠 수는 있다.
4. Transition & Transformation
- Transition과 Transformation은 함께 사용될 수 있다. 아래의 사진들과 코드를 참고해보자.
1) hover일 때, 그림이 360도로 돌아가는 transition
<style>
img {
border: 5px solid black;
border-radius: 50%; /* 50%는 원이 된다.*/
transition: transform 4s ease-in-out;
}
img:hover {
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<img src="logo.png"/>
</body>
</html>
2) hover일 때, 그림이 x축으로 회전하면서 크기가 작아지는 transition
<style>
img {
border: 5px solid black;
border-radius: 50%; /* 50%는 원이 된다.*/
transition: transform 3s ease-in-out;
}
img:hover {
transform: rotatex(360deg) scale(0.5);
}
</style>
</head>
<body>
<img src="logo.png"/>
</body>
</html>
- 더욱 다양한 효과를 사용해 보고 싶다면 아래 링크의 MDN문서를 찾아보자.
developer.mozilla.org/en-US/docs/Web/CSS/transform
transform
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
'Front-end > HTML + CSS' 카테고리의 다른 글
| HTML/CSS - Media Query(반응형 웹사이트 만들기) (0) | 2020.08.30 |
|---|---|
| HTML/CSS - Animation (2) | 2020.08.30 |
| HTML/CSS - CSS Variable (0) | 2020.08.27 |
| HTML/CSS - State & 속성 선택자(selector) (0) | 2020.08.26 |
| HTML/CSS - Pseudo selectors(선택자) (0) | 2020.08.25 |
댓글