-
transition프로그래밍/HTML&CSS 2022. 9. 19. 22:49728x90
transform 속성은 단순히 이동, 회전, 확대, 축소 등을 변환하는 방법이라면 transition은 하나의 스타일을 완전히 다른 스타일로 바꾸는 방법이다. 스타일을 바꾸는 동안의 시간을 조절하여 애니메이션 효과를 줄 수 있다.
transition 구성
transition: property timing-function duration delay종류 설명 property 요소에 추가할 전환 효과를 설정 timing-function 전환 효과의 값을 설정 duration 시간동안 전환 효과를 나타냄 delay 시간만큼 대기하다가 전환효과를 나타냄 timing-function 속성값
종류 설명 linear 처음부터 끝까지 일정한 속도 ease-in 느리게 시작 ease-out 느리게 마무리 ease-in-out 전환 효과가 천천히 시작하고 빨라지고 천천히 마무리 <!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>transition</title> <style> div{ width: 100px; height: 100px; float: left; margin: 30px; } #border-tr{ background-color: deeppink; border: 3px solid black; transition: all linear 1.5s; } #border-tr:hover{ background-color: pink; border: 3px dotted black; border-radius: 50%; } </style> </head> <body> <div id="border-tr"></div> </body> </html>
박스에 마우스를 가져다 대면 아래 그림과 같은 형태로 1.5초 동안 변화하는 것을 볼 수 있다.
728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
text-overflow (0) 2022.09.21 animation (0) 2022.09.20 벤더 프리픽스(vender prefix) (0) 2022.09.18 transform (0) 2022.09.18 시맨틱 태그 (0) 2022.09.17