'float'이라는 위아래로 가볍게 움직이는 애니메이션 만들기
키프레임 정의
@-webkit-keyframes float {
0%,100% {
top:10px;
}
50% {
top:30px;
}
}
@keyframes float {
0%,100% {
top:10px;
}
50% {
top:30px;
}
}
CSS 적용하기 - 3초 동안 무한 반복. 시간당 속도 옵션은 ease
float {
webkit-animation: 3s arrow infinite ease;
animation: 3s arrow infinite ease;
}
1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
3. ease-in : 애니메이션 효과가 천천히 시작됩니다.
4. ease-out : 애니메이션 효과가 천천히 끝납니다.
5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝납니다.
6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
출처 : TCP SCHOOL
'HTML & CSS' 카테고리의 다른 글
inline-block 사이 간격 발생 (margin: 0) (0) | 2023.04.12 |
---|---|
[CSS] 영상을 배경으로 쓸 때 화면 가득 채우기 (0) | 2023.03.14 |
[CSS] position: absolute 가운데 정렬 시키기 (0) | 2023.03.13 |
[HTML&CSS]img 태그 src가 없을때 기본 이미지 표시하기 (0) | 2023.03.05 |
[CSS]IMG를 수직 중앙 정렬 시키기 (0) | 2023.02.17 |