transform
배운 속성
- rotate
- scale
- skew
- translate
<style>
.box1 {
width :100px;
height:100px;
background-color:skyblue;
transform: rotate(45deg); /*각도 변경*/
transform: scale(2, 3); /*width, height로 2, 3배 크기 증가*/
transform: skew(10deg, 20deg); /* x, y축으로 각도 변경 */
transform: translate(100px, 200px); /* x, y축으로 위치 변경 */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
transition
배운 속성
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
<style>
.box1 {
width :100px;
height:100px;
background-color:skyblue;
transition-property: width; /* 효과를 적용할 css 속성 */
transition-duration: 1.5s; /* 효과가 나타나는데 걸리는 시간, 1500ms로도 표기 가능 */
transition-timing-function: linear; /* 효과 속도, linear는 일정하게 */
transition-delay: 0.5s; /* 효과가 시작되기까지 걸리는 시간, 마찬가지로 500ms로 표기 가능 */
}
.box1:hover{
width:300px;
transition : width 1.5s linear 0.5s; /* 이런식으로 한줄로도 작성할 수 있음 */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>animation
배운 속성
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
<style>
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name:changeWidth; /* 지정할 animation의 이름 */
animation-duration: 3s; /* 효과가 나타나는데 걸리는 시간, 1500ms로도 표기 가능 */
animation-timing-function: linear; /* 효과 속도, linear는 일정하게 */
animation-delay: 1s; /* 효과가 시작되기까지 걸리는 시간, 마찬가지로 500ms로 표기 가능 */
animation-iteration-count : 6; /* 반복 횟수 */
animation-direction:alternate; /* 진행 방향 */
}
@keyframes changeWidth { /*keyframes는 애니메이션을 구체적으로 제어하는 단계 */
from {width: 300px;}
to {width: 600px;}
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
'Develop > HTML, CSS' 카테고리의 다른 글
| CSS - clear 속성 (0) | 2022.09.12 |
|---|---|
| CSS - margin 병합 (0) | 2022.09.12 |