CSS 3 사양이 출시된 이후 웹 디자이너와 프런트 엔드 웹 개발자는 JavaScript를 사용하지 않고도 멋진 CSS 애니메이션을 CSS로 만들 수 있습니다.
이 빠른 CSS 참조 안내서는 트렌지션(전환) 속성을 사용하는 방법을 설명하고 CSS 3 전환으로 수행할 수 있는 놀라운 사용 가능한 예제를 제공합니다.
CSS 트렌지션이란 무엇입니까?
CSS 3 사양으로 몇 년 전에 소개 된 트렌지션은 프런트 엔드 개발자가 특정 시간동안 특정 CSS 속성의 값을 부드럽게 변경할 수있는 속성 집합입니다.
5가지 CSS 속성을 사용하여 전환을 만들 수 있습니다. 그것들을 살펴 봅시다 :
| CSS Property | Description |
|---|---|
transition-property |
트렌지션을 적용 할 속성을 지정합니다. Example: width, background, border…. |
transition-delay |
트렌지션이 몇 초 후에 시작되는지 지정합니다. Example: 0.2s |
transition-duration |
트렌지션 시간을 지정합니다. Example: 1s |
transition-timing-function |
트렌지션에 대한 특정 속도 곡선을 지정하는 타이밍 기능. Example: ease |
transition |
4 개의 속성을 한 번에 지정하는 속기 속성입니다. Example: width 1s linear 1s |
이러한 전환 트렌지션이 실제로 사용되는 것을 살펴 보겠습니다. 먼저 다음과 같은 간단한 HTML을 살펴보십시오.
<div id="example">An example div</div>그리고 관련된 CSS 속성 / 값 :
#example{
background:red;
padding: 2em;
width:40%;
color:#fff;
transition-property: width; /* Apply transition effect on the width */
transition-duration: 1s; /* Transition will last 1 second */
transition-timing-function: linear; /* Timing function to specify a linear transition type */
transition-delay: 1s; /* Transition starts after 1 second */
}
#example:hover{
width: 50%;
}위의 예에서 볼 수 있듯이 CSS 구문은 명확하고 단순합니다. 이 CSS 전환을 실제로 여기 링크에서 볼 수 있습니다.
전이 속기 속성을 사용하여 실제로 전이 속성, 전이 지속 시간, 전이 타이밍 기능 및 전이 지연을 대체할 수 있습니다.
CSS 구문은 간단합니다. 아래와 같이 각 전환(트렌지션) 속성을 하나씩 지정하면됩니다.
#example{ transition: width 1s linear 1s; }이 속기 속성을 사용하면 한 번에 4 개의 속성을 모두 설정할 수 있습니다.
전환에 대한 자세한 내용은 CSS 참조를 확인하십시오.
2019년 현재 전환 속성은 모든 최신 브라우저에서 잘 지원됩니다. -webkit-, -moz- 또는 -o-와 같은 공급 업체 접두사를 사용하는 경우 이전 브라우저는 여전히이 기능을 지원할 수 있습니다. 브라우저 호환성에 대한 자세한 내용은 사용할 수 있습니까를 참조하십시오.
전환 속성, 효과 및 타이밍 함수를 보여주는이 빠른 CSS 참조 후에 구체적인 전환 예제를 살펴 보겠습니다.
부드러운 배경색 변경
많은 모던 웹 사이트에서 간단하지만 일반적인 효과는 hover에서 부드러운 배경색을 변경하는 것입니다. 이 간단한 HTML로 시작하겠습니다.
<div class="color">Change Color</div>
이제 CSS 마술을 할 시간입니다. 12 행의 전환 CSS 속성에 주목하십시오. 그러면 <div>가 hover 됩니다.
div.color {
margin: 121px 149px;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
div.color:hover {
background: #53a7ea;
}
정교한 배경 전환
CSS3 전환으로 배경에 애니메이션을 적용하는 것이 얼마나 쉬운지를 보여주는 고급 예제입니다. HTML은 다음과 같습니다.
<div class="container">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
</div>
보다 정교한 애니메이션을 위해 CSS 속성뿐만 아니라 전환(트렌지션) 속성의 사용을 파악할 수 있는 관련 CSS 코드.
.circle {
border-radius: 50%;
left: calc(50% - 6.25em);
top: calc(50% - 12.5em);
transform-origin: 50% 12.5em;
width: 12.5em;
height: 12.5em;
position: absolute;
box-shadow: 0 1em 2em rgba(0, 0, 0, .5);
}
.one,
.three {
background: rgba(142, 92, 205, .75);
transition: background 1s ease-in;
}
.two,
.four {
background: rgba(236, 252, 100, .75);
}
.one {
transform: rotateZ(0);
}
.two {
transform: rotateZ(90deg);
}
.three {
transform: rotateZ(180deg);
}
.four {
transform: rotateZ(-90deg);
}
.circle:hover {
background: rgba(142, 92, 205, .25);
}
Source: Flavio Copes
CSS 그라디언트 테두리 및 둥근 모서리 버튼
다음은 CSS 3로만 구성된 초 고급 버튼입니다. HTML은 매우 간단합니다.
<a class="btn" href="#">
<span>A button!</span>
</a>
CSS 코드는 조금 더 복잡하며 CSS 3 전환의 모든 기능을 보여줍니다.
body {
background: #e7e8e9;
padding: 40px;
}
.btn {
background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
border-radius: 40px;
box-sizing: border-box;
color: #00a84f;
display: block;
font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/
height: 80px;
letter-spacing: 1px;
margin: 0 auto;
padding: 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 264px;
z-index: 2;
}
.btn:hover {
color: #fff;
}
.btn span {
align-items: center;
background: #e7e8e9;
border-radius: 40px;
display: flex;
justify-content: center;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn:hover span {
background: transparent;
}
Source: Amber Weinberg
hover on / hover off에 대한 다른 전환
다음 HTML에서 설명하는 것처럼 호버 온 및 호버 오프 상태에서 전환이 다를 수 있습니다.
<a id="button" href="#">Buy Now!</a>
그리고 CSS..
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
transition: border-radius 2s;
}
Source: Chris Coyier
한 요소 위에 마우스를 올려 놓으면 다른 요소에 영향을 줍니다.
한 요소를 다른 요소에 마우스로 가져가서 다른 요소에 영향을 주는 방법에 대한 흥미로운 예를 통해 마무리 하겠습니다. 두 개의 HTML 컨테이너를 만들어 보겠습니다.
<div id="box1">#box1</div>
<div id="box2">#box2</div>
이제 CSS를 봅시다 :
#box2 {
position: absolute;
left: 120px;
background: blue;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#box1:hover + #box2 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
left: calc(100% - 102px);
background: yellow;
}
Source: The Art of Web
자주 묻는 질문
CSS에서 변환과 전환의 차이점은 무엇입니까?
CSS 전환을 사용하면 타이밍 함수를 사용하여 주어진 시간에 걸쳐 속성을 부드럽게 변경할 수 있습니다. 반면에 CSS 변환을 사용하면 CSS 요소를 2차원 또는 3차원 공간으로 변환할 수 있습니다.
CSS 타이밍 기능이란 무엇입니까?
CSS 타이밍 함수는 전환 타이밍 기능 및 애니메이션 타이밍 기능 전환 속성을 사용하여 과정 중에 전환 속도를 변경하는데 사용됩니다.
CSS 완화 기능이란 무엇입니까?
완화 기능은 시간이 지남에 따라 매개 변수의 변화율을 지정하여 전환에 더 사실감을 더할 수 있습니다.
기고: Jean-Baptiste Jung
출처: https://catswhocode.com/css-transition/
'프로그래머 하루3시간' 카테고리의 다른 글
| 구글링+Stack overflow+MDN 검색하고 물어보자. (0) | 2021.10.11 |
|---|---|
| 3 단계로 웹 사이트를 반응형으로 만들기 (프로그래밍 독학) (0) | 2020.01.17 |
| 간단하고 효율적인 PHP 캐시를 만드는 방법 (프로그래밍 독학) (0) | 2020.01.16 |
| Atom 에디터 Atom editor 패키지 설치(emmet, script, atom-beautify) (0) | 2019.10.09 |
| HTML 연습 (0) | 2018.02.06 |
댓글