iPod Video White

πŸ““ TIL

[220412] transition / transform / animation / @keyframs

k_m_jin 2022. 4. 12. 01:40

Transition

: μš”μ†Œμ˜ μ „ν™˜ 효과λ₯Ό μ§€μ •ν•˜λŠ” 단좕속성(κ°œλ³„μ†μ„±μ΄ μžˆλ‹€λŠ” 뜻)

transition : 속성λͺ… μ§€μ†μ‹œκ°„ νƒ€μ΄λ°ν•¨μˆ˜ λŒ€κΈ°μ‹œκ°„ ;

transition-property : (all) μ „ν™˜μ„ μ‚¬μš©ν•  속성 이름을 μ§€μ •

* transition-duration : (0) μ Όν™˜μ˜ 지속 μ‹œκ°„ μ§€μ • 

transition-timing-function : (ease) μ „ν™˜μ˜ 타이밍 ν•¨μˆ˜λ₯Ό μ§€μ •

transition-delay : (0) μ „ν™˜μ„ λͺ‡ 초 뒀에 μ‹œμž‘ν• μ§€ λŒ€κΈ°μ‹œκ°„ μ§€μ •

 

μ‰Όν‘œλ₯Ό 톡해 μ—¬λŸ¬κ°œμ˜ 속성 μž…λ ₯ κ°€λŠ₯

div{ transition :
	width : .5s,
    color : 2s; }

 

Transform

: μš”μ†Œμ˜ λ³€ν™˜ 효과

transform : λ³€ν™˜ν•¨μˆ˜1 λ³€ν™˜ν•¨μˆ˜2 λ³€ν™˜ν•¨μˆ˜3...;

      원근법 ν•¨μˆ˜(perspective)λŠ” λ§¨μ•žμ—!

  • transform-style :μžμ‹μš”μ†Œμ˜ 3d 효과 적용 μ—¬λΆ€ 
    flat (κΈ°λ³Έ) : μ μš©ν•˜μ§€ μ•ŠμŒ
    preserve-3d : μ μš©ν•¨

 

  적용 λŒ€μƒ 기쀀점 μ„€μ •
속성 perspective :600px κ΄€μ°° λŒ€μƒμ˜ λΆ€λͺ¨ perspective-origin

ν•¨μˆ˜ transform: perspective(600px) κ΄€μ°° λŒ€μƒ transform-origin
: λ³€ν™˜μ˜ 기쀀점 νšŒμ „ 쀑심점(50% 50%)

transform

 

Backface-visibility

: 3D λ³€ν™˜μœΌλ‘œ νšŒμ „λœ μš”μ†Œμ˜ λ’·λ©΄ μˆ¨κΉ€ μ—¬λΆ€

backface-visibility : visible (κΈ°λ³Έ) λ’·λ©΄ λ³΄μž„

                                  hidden λ’·λ©΄ μˆ¨κΉ€

 

참고 링크

css3 

https://happy-noether-c87ffa.netlify.app/presentations/level2/css3/

 

CSS ++

 

happy-noether-c87ffa.netlify.app

 

Animation

: @keyframse 의 λ™μž‘μ„ μ œμ–΄ν•˜λŠ” 속성

 

aniamtion κ°œλ³„ 속성   κΈ°λ³Έκ°’  
animation-name 이름 none  
animation-duration μ§€μ†μ‹œκ°„ 0s  
animation-timing-function νƒ€μ΄λ°ν•¨μˆ˜ ease  
animation-delay λŒ€κΈ°μ‹œκ°„ 0s  
animation-iteration-count 반볡횟수 1 숫자 / infinite
animation-direction λ°©ν–₯ normal reverse / alternate / alternate-reverse
animation-fill-mode μ „ν›„μƒνƒœ none forwards / backwords / both
animation-play-state λ™μž‘μƒνƒœ running paused (μΌμ‹œμ •μ§€)

 

@keyframse

: animation 을 λ§Œλ“€κΈ° μœ„ν•œ 각 κ΅¬κ°„μ˜ μ„€μ •

@keyframes rolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }

 

좜처 : (KDT FE2) ν•œ λ²ˆμ— λλ‚΄λŠ” ν”„λ‘ νŠΈμ—”λ“œ 개발 초격차 νŒ¨ν‚€μ§€ Online. λ°•μ˜μ›… κ°•μ‚¬λ‹˜

λ°˜μ‘ν˜•

'πŸ““ TIL' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[220412] grid  (0) 2022.04.13
[220412] μŠ€νƒ€λ²…μŠ€ 예제  (0) 2022.04.12
[220408] Flex  (0) 2022.04.08
[220407]Position  (0) 2022.04.08
[220406]CSS 속성  (0) 2022.04.06