CSS3 특수효과 transition
2577 단어 CSS3transitionCSS3
CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 그 변화가 설정한 시간과 방법에 따라 다르게 적용됩니다.
5_transitions.html
<div class="box"></div>
css는 style태그에
body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background: white;
width: 100px;
height: 100px;
transition-property: background-color border-radius height width;
/* transition-property: all; */
transition-duration: 3s;
/* transition-timing-function: ease-out; */
/* transition-delay: 2s; */
/* 단축키워드 - property/duration/timing-function/delay */
/* transition: all 1s ease-in-out; */
}
.box:hover {
background: red;
border-radius: 50%;
height: 300px;
width: 300px;
}
사용가능한 속성 종류
/*
background-color
background-position
border-color
border-width
border-spacing
bottom
color
font-size
font-weight
height left
letter-spacing
line-height
margin
max-height
max-width
min-height
min-width
opacity
outline-color
outline-offset
outline-width
padding right
text-indent
text-shadow
top
vertical-align
visibility
width
word-spacing
z-index
*/
실습
https://codepen.io/learnwebcode/pen/GOWxLe?editors=1100
1. 네비 메뉴에 마우스 올릴때 색이 변하는 시간
2. 메인 이미지 hover 커짐
3. 메인 이미지 자막 올라오고 투명해짐
4. 아래쪽 원 안의 글자가 돌아감
Author And Source
이 문제에 관하여(CSS3 특수효과 transition), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@drv98/CSS3-특수효과-transition저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)