[HTML/CSS] πŸ“š transition

pyeonneΒ·2022λ…„ 6μ›” 15일
0
post-thumbnail

πŸ“‹ κΈ°μ–΅ν•˜κ³  싢은 λ‚΄μš©

  • λ³„λ„μ˜ Javascript μ½”λ“œ 없이 transition μ†μ„±λ§ŒμœΌλ‘œλ„ λ‹€μ΄λ‚˜λ―Ήν•œ μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό μ μš©ν•  수 μžˆλ‹€.

πŸ“Œ transition-property, transition-duration

  • νŠΉμ • μ†μ„±μ—λ§Œ transition을 μ μš©ν•˜κ³  싢을 λ•Œ transition-property μ†μ„±μœΌλ‘œ μ§€μ •ν•˜λ©΄ λœλ‹€.
  • transition-duration μ†μ„±μœΌλ‘œ μ–Όλ§ˆ 만큼의 μ‹œκ°„ λ™μ•ˆ transition을 μ μš©ν• μ§€ 지정할 수 μžˆλ‹€.

πŸ“Œ transition-delay, transition-timing-function

  • μ—¬λŸ¬ 개 μš”μ†Œλ“€μ˜ transition-delay 속성 값을 λ‹€λ₯΄κ²Œ μ§€μ •ν•˜λ©΄ μ°¨λ‘€λŒ€λ‘œ transition λ˜κ²Œλ” λ³€κ²½ν•  수 μžˆλ‹€.
  • transition-timing-function 속성을 μ‚¬μš©ν•΄ transition 속도λ₯Ό λ‹€μ΄λ‚˜λ―Ήν•˜κ²Œ λ³€κ²½ν•  수 μžˆλ‹€.

πŸ“Œ transition

transition: margin-left 4s ease-in-out 1s;
  • transition ν•˜μœ„ 속성듀은 transition 단좕 속성을 μ‚¬μš©ν•΄ ν•œμ€„λ‘œ μž‘μ„±ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€.
  • μ•ž μͺ½μ˜ time μžλ£Œν˜•μ€ duration을 μ˜λ―Έν•˜κ³ , λ’€ μͺ½μ˜ time μžλ£Œν˜•μ€ delayλ₯Ό μ˜λ―Έν•œλ‹€.
  • time μžλ£Œν˜• μ™Έμ—λŠ” μž‘μ„± μˆœμ„œλ₯Ό 지킀지 μ•Šμ•„λ„ λ˜μ§€λ§Œ, transition-property 속성을 제일 λ¨Όμ € μž‘μ„±ν•˜λŠ” 것이 μ’‹λ‹€.

πŸ“Œ transition + transform ν™œμš©

.box {
	width: 100px;
    height: 100px;
    border: 10px solid green;
    background-color: rab(204, 253, 255);
    border-radius: 30px;
    
    transform-origin: bottom right;
    transition: all 1s ease-in-out;
}

.box:hover {
	transform: rotate(360deg);
}

πŸ”— μ°Έκ³  래퍼런슀

profile
κ±΄κ°•ν•œ λͺΈκ³Ό λ§ˆμŒμ—μ„œ κ±΄κ°•ν•œ μ½”λ“œκ°€ νƒœμ–΄λ‚œλ‹€ !

0개의 λŒ“κΈ€