<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Transtion</title>
<style>
.transition {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
// 마우스를 올리면 1초 후에 width값이 300px로 2초동안, 속도 일정하게 변하는 애니메이션 코드
.transition:hover {
width: 300px;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>박스에 마우스를 올리면 1s후에 width가 증가하고 마우스를 떼면 width가 다시 줄어든다.
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
이 코드는 한줄로 작성 가능 ( -속성 의 순서를 맞춰서 적어주어야한다.)
transition : width 2s linear 1s;첫번째 숫자는 duration이고 두번째 숫자는 delay이다.
만약 숫자가 하나만 적혀있다면 무조건 duration이다.
'🥸 웹앱개발 이모저모 > Css' 카테고리의 다른 글
| [CSS] css 개념 | 미디어 쿼리 (0) | 2023.05.18 |
|---|---|
| [CSS] 그라데이션 효과, 애니메이션 효과 (0) | 2023.03.29 |
| [CSS] flexbox 보충 (0) | 2023.03.29 |
| [CSS] 선택자 (0) | 2023.03.29 |
| [CSS] Position, flexbox (0) | 2023.03.29 |