Search

μ• λ‹ˆλ©”μ΄μ…˜ 속성

μ• λ‹ˆλ©”μ΄μ…˜ 속성

μš”μ†Œμ— μ›€μ§μž„μ„ μ§€μ •ν•˜κ³  ν”„λ ˆμž„λ³„ μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό μ£ΌλŠ” 속성
β€’
μ• λ‹ˆλ©”μ΄μ…˜ μ†μ„±μ˜ μ’…λ₯˜
β€’
κΈ°λ³Έ μ˜ˆμ‹œμ½”λ“œ
β€’
μ• λ‹ˆλ©”μ΄μ…˜ 속성 μ‘μš©

μ• λ‹ˆλ©”μ΄μ…˜ μ†μ„±μ˜ μ’…λ₯˜

속성
μ„€λͺ…
κΈ°λ³Έ μ˜ˆμ‹œ μ½”λ“œ
animation
μ• λ‹ˆλ©”μ΄μ…˜μ„ μ μš©ν•  μš”μ†Œμ˜ 속성을 μ„€μ •ν•©λ‹ˆλ‹€.
animation: name duration timing-function delay iteration-count direction;
animation-name
μ• λ‹ˆλ©”μ΄μ…˜μ˜ 이름을 μ •μ˜ν•©λ‹ˆλ‹€.
animation-name: slide;
animation-duration
μ• λ‹ˆλ©”μ΄μ…˜μ˜ 지속 μ‹œκ°„μ„ μ„€μ •ν•©λ‹ˆλ‹€.
animation-duration: 2s;
animation-timing-function
μ• λ‹ˆλ©”μ΄μ…˜μ˜ 속도 곑선을 μ„€μ •ν•©λ‹ˆλ‹€.
animation-timing-function: ease-in;
animation-delay
μ• λ‹ˆλ©”μ΄μ…˜ μ‹œμž‘ μ „ 지연 μ‹œκ°„μ„ μ„€μ •ν•©λ‹ˆλ‹€.
animation-delay: 1s;
animation-iteration-count
μ• λ‹ˆλ©”μ΄μ…˜μ˜ 반볡 횟수λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.
animation-iteration-count: infinite;
animation-direction
μ• λ‹ˆλ©”μ΄μ…˜μ˜ 진행 λ°©ν–₯을 μ„€μ •ν•©λ‹ˆλ‹€.
animation-direction: alternate;
animation-fill-mode
μ• λ‹ˆλ©”μ΄μ…˜ μ’…λ£Œ ν›„ μš”μ†Œμ˜ μŠ€νƒ€μΌμ„ μ„€μ •ν•©λ‹ˆλ‹€.
animation-fill-mode: forwards;

κΈ°λ³Έ μ˜ˆμ‹œ μ½”λ“œ

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>μ• λ‹ˆλ©”μ΄μ…˜ 속성 μ˜ˆμ‹œ</title> <style> body { margin: 0; font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; } /* μ• λ‹ˆλ©”μ΄μ…˜ μ •μ˜ */ @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* μ• λ‹ˆλ©”μ΄μ…˜ 적용 */ .animation-example { width: 150px; height: 150px; background-color: lightcoral; margin: 20px auto; display: inline-block; animation: slide 2s ease-in-out 1s infinite alternate; } </style> </head> <body> <div class="animation-example"></div> </body> </html>
HTML
볡사
이 μ½”λ“œλŠ” @keyframes κ·œμΉ™μ„ μ‚¬μš©ν•˜μ—¬ slide μ• λ‹ˆλ©”μ΄μ…˜μ„ μ •μ˜ν•˜κ³ , 이λ₯Ό .animation-example ν΄λž˜μŠ€μ— μ μš©ν•©λ‹ˆλ‹€. μ• λ‹ˆλ©”μ΄μ…˜μ˜ 이름, 지속 μ‹œκ°„, 타이밍 ν•¨μˆ˜, 지연 μ‹œκ°„, 반볡 횟수 및 λ°©ν–₯을 μ„€μ •ν•˜μ—¬ μš”μ†Œμ˜ μ›€μ§μž„μ„ μ œμ–΄ν•©λ‹ˆλ‹€.
μŠ€νƒ€μΌ 속성
μŠ€νƒ€μΌ 속성