일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Archives
- Today
- Total
Tags
- Date 객체
- css 줄바꿈
- Object 객체
- display:inline-block
- css로 줌인 효과 주기
- 레이아웃 잡기
- html 줄바꿈
- 모던 웹을 위한 JavaScript + jQuery 입문
- CSS
- transform 효과
- html br
- HTML
- 코딩 예제
- CSS3 효과
- zoom:1
- zoomin 효과
- 속성 scale
- transform 전환효과
- ie7 inline
- String 객체
- 속성 ease
- footer 고정
- Array 객체
- css3
- ie7 핵
- 한빛미디어
- Math 객체
- float 깨짐
- Number 객체
- CSS 효과주기
마크업개발 메모장
CSS3 animation를 이용한 이미지 움직이기 본문
CSS3 animation으로 이미지를 상하로 움직이기!!!
소스보러가기 !!
추가 설명)
animation: myfirst 0.7s linear 1s infinite alternate;
@keyframes myfirst {
0% {opacity: 1.0; top:15px;}
100% {opacity: 1.0; top:0px;}
}
여기에서 myfirst라는 것은 애니메이션 이름임.
키프레임에서 애니메이션 이름을 동일하게 사용해주면 해당 애니메이션이 작동하게 됨.
애니메이션 이름은 사용자가 정할 수 있음.
'HTML/CSS' 카테고리의 다른 글
ie7에서 inline-block 사용하기 (0) | 2015.03.12 |
---|---|
html css로 footer 하단에 고정하기 (0) | 2015.02.05 |
CSS3 transition 속성 (0) | 2014.11.17 |
푸터 하단 고정방법 (0) | 2014.08.28 |
사파리에서 깨지는 레이아웃 잡기 (0) | 2014.08.27 |