티스토리 뷰

공부 노트

[CSS] CSS transition CSS 트랜지션

2021bong 2022. 3. 20. 17:50

How to Use CSS Transitions?

To create a transition effect, you must specify two things: 트랜지션 효과를 주고 싶다면 두가지만 기억하세요

  • the CSS property you want to add an effect to 효과를 주려는 css속성
  • the duration of the effect 효과의 시간

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

 

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

 

 

Change Several Property Values 여러 속성 값 변경

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

div {
  transition: width 2s, height 4s;
}

 

 

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

  • ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) 시작은 느리게 중간은 빠르게 끝은 느리게
  • linear - specifies a transition effect with the same speed from start to end 시작부터 끝까지 속도를 동일하게
  • ease-in - specifies a transition effect with a slow start 시작을 느리게
  • ease-out - specifies a transition effect with a slow end 끝을 느리게
  • ease-in-out - specifies a transition effect with a slow start and end 시작과 끝을 느리게
  • cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function cubic-bezier 설정 가능

The following example shows some of the different speed curves that can be used:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
 

 

Delay the Transition Effect 트랜지션 효과 딜레이

The transition-delay property specifies a delay (in seconds) for the transition effect.

The following example has a 1 second delay before starting:

div {
  transition-delay: 1s;
}

 

 

More Transition Examples

The CSS transition properties can be specified one by one, like this: 이렇게 트랜지션 속성을 각각 써줄 수도 있고

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

or by using the shorthand property transition: 축약형으로 짧게 써 줄 수도 있음

div {
  transition: width 2s linear 1s;
}

 

Transition + Transformation

The following example adds a transition effect to the transformation: 트랜스폼이랑 쓸 수도 있음

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

 

참고

 

CSS Transitions

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

728x90
저작자표시

'공부 노트' 카테고리의 다른 글

[Udemy] Learn The Linux Command Line: Basic Commands  (0) 2022.07.11
Git에서 특정 브랜치만 클론하기  (0) 2022.07.08
코드잇 리눅스커맨드  (0) 2022.03.19
코드잇 유닉스 커맨드 vim  (0) 2022.03.14
코드잇 .gitignore 파일  (0) 2022.03.10
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함