-
트랜지션과 애니메이션CSS 2023. 6. 22. 14:47
트랜지션이란 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것
transition-property 속성 트랜지션을 적용할 속성 선택
(이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 됨)
ransition-duration 속성 트랜지션 진행 시간 지정
예제) transition-duration (상자가 2초동안 너비,높이 커짐)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tr1{ width: 100px; height: 100px; border: 1px solid black; background-color: blue; transition-property: width,height; /* 2초동안 너비가 2배 1초동안 높이가 1.2배 */ transition-duration: 2s,1s; } .tr1:hover{ width: 200px; height: 120px; } </style> </head> <body> <div class="tr1"></div> </body> </html>transition-timing-function 속성 트랜지션의 시작과 중간, 끝에서의 속도 지정
transition-delay 속성 트랜지션이 언제부터 시작될지 지연 시간 지정
예제) transition-delay (상자가 순차적으로 굴러감)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #ex{ width: 500px; height: 150px; margin: 0 auto; border: 1px solid #aaa; border-radius: 30px; padding: 20px; } #ex:hover .box{ transform: rotate(720deg); margin-left: 420px; } .box{ font-size: 12px; width: 60px; height: 60px; margin-bottom: 10px; background-color: #eee; } #no-delay{ border: 1px solid #ff6a00; transition-duration: 3s; } #delay{ border: 1px solid #006aff; transition-duration: 3s; /* 1초동안 지연 */ transition-delay: 1s; } .box p{ text-align: center; padding-top: 4px; } </style> </head> <body> <div id="ex"> <div id="no-delay" class="box"> <p>no-delay</p> </div> <div id="delay" class="box"> <p>delay</p> </div> </div> </body> </html>예제) transition (상자가 돌아가면서 크기, 색깔이 바뀜)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tr1{ width: 200px; height: 200px; background-color: red; border: 1px solid black; /* 2초동안 변화, 시작을 느리게 */ transition: 2s ease-in; } .tr1:hover{ width: 100px; height: 100px; background-color: #ff6e5f; transform: rotate(270deg); } </style> </head> <body> <div class="tr1"></div> </body> </html>예제) transition (상자가 원근감을 주면서 회전하면서 커짐)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 100px; margin: 100px; background: #0094ff; } .box{ transition: 2s ease-in; } .box:hover{ /* x축으로 180도 회전하면서 가로,세로 2배씩 커짐 */ /* transform: scale(2) rotateX(180deg); */ /* 원근감 추가 */ transform: scale(2) rotateX(180deg) perspective(120px); } </style> </head> <body> <div class="box"></div> </body> </html>애니메이션
@keyframes 속성 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정
예제) @keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: blue; animation-name: change-bg; animation-duration: 3s; } /* animation-name 과 @keyframes 이름을 매칭한다 */ @keyframes change-bg{ /* 애니메이션 시작 시점 */ from{ background-color: blue; border: 1px solid black; } /* 애니메이션 끝 시점 */ to{ background-color: a5d6ff; border: 1px solid blue; border-radius: 50%; } } </style> </head> <body> <div></div> </body> </html>animation-name 속성 @keyframes 속성에서 만든 애니메이션 이름을 사용
예제) animation-name
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 100px; height: 100px; margin: 50px; float: left; } #box1{ background-color: #4cff00; border: 1px solid black; animation-name: shape; animation-duration: 3s; } #box2{ background-color: #8f06b0; border: 1px solid black; animation-name: rotate; animation-duration: 3s; } @keyframes shape{ from{ border: 1px solid black; } to{ border: 1px solid black; border-radius: 50%; } } @keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(45deg); } } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>animation-duration 속성
애니메이션 실행 시간 설정. 기본값 0
animation-direction 속성
애니메이션이 끝난 후 원래 위치로 돌아가거나 반대 방향으로 애 니메이션 실행하도록 지정
animation-iteration-count 속성
애니메이션 반복 횟수 지정하기
animation-timing-function 속성
애니메이션 속도 곡선 지정
animation 속성
여러 개의 애니메이션 속성을 하나의 속성으로 줄여서 사용
지정하지 않은 속성은 기본 값 사용.
하지만 animationduration 속성 값은 반드시 지정해야함
예제) animation (상자가 돌면서 색깔이 바뀜)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 60px; height: 60px; margin: 60px; animation: rotate 1.5s infinite, backgound 1.5s infinite alternate; } @keyframes rotate{ from{ transform: rotateX(0deg) rotateY(0deg) perspective(120px); } 50%{ transform: rotateX(-180deg) rotateY(0deg) perspective(120px); } to{ transform: rotateX(-180deg) rotateY(-180deg) perspective(120px); } } @keyframes backgound{ from{ background: red; } 50%{ background: green; } to{ background: blue; } } </style> </head> <body> <div class="box"></div> </body> </html>'CSS' 카테고리의 다른 글
미디워 쿼리 (0) 2023.06.22 반응형 웹이란 (0) 2023.06.22 CSS3와 애니메이션 (0) 2023.06.22 다재다능한 CSS3 선택자 (0) 2023.06.22 HTML5와 멀티미디어 (0) 2023.06.22