반응형
| ease | 빠르게 - 느리게 | cubic-bezier( .25, .1, .25, ,1) |
| linear | 일정하게 | cubic-bezier(0, 0, 1, 1) |
| ease-in | 느리게 - 빠르게 | cubic-bezier(.42, 0, 1, 1) |
| ease-out | 빠르게 - 느리게 | cubic-bezier(0, 0, .58, 1) |
| ease-in-out | 느리게 - 빠르게 - 느리게 | cubic-bezier(0, 0, .58, 1) |
| cubic-beier(n, n, n, n) | 자신만의 값을 정의 | |
| steps(n) | n번 분할된 애니메이션 | |
animation-delay : 대기시간 (음수 값도 허용)
.box:hover{
animation: size-up 1s 2 alternate linear 0s;
/* animation-timing-function: linear;
animation-delay; */
}
@keyframes size-up{
0%{ width: 100px;}
100% {width: 500px;}
}반응형
'2020 > CSS' 카테고리의 다른 글
| animation-fill-mode (0) | 2020.03.24 |
|---|---|
| animation-iteration-count, animation-direction (0) | 2020.03.24 |
| @keyframes (0) | 2020.03.24 |
| CSS: transform 3D 변환 함수 (0) | 2020.03.23 |
| CSS : transform 2D 변형효과 (0) | 2020.03.23 |
꽃꽂이하는개발자