animation : 애니메이션
html)
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> .blink { width: 100px; height: 100px; background-color: #f00; /* animation 속성 animation-delay : 요소가 로드된 후 애니메이션이 시작될 때까지의 시간 animation-direction : 애니메이션의 진행 방향 normal : 기본값 reverse : 반대로 진행 alternate : 순방향으로 진행 후 역방향으로 진행 alternate-reverse : 역방향으로 진행 후 순방향으로 진행 animation-duration : 애니메이션 진행되는 시간 animation-iteration-count : 반복횟수 animation-name : @keyframes 로 지정한 이름 호출 animation-play-state : 애니메이션 멈추거나 다시 시작 running : 재생 paused : 중지 animation-timing-function : ease, linear 등 */ -webkit-animation : bgblink 3s linear 1s infinite; animation : bgblink 3s linear 1s infinite; } /* @keyframes : 지점을 지정하여 스타일 지정 */ @keyframes bgblink { 0% { background-color: #f00; } 50% { background-color: #00f; } 100% { background-color: #f00; } } </style> </head> <body> <div class="blink"></div> </body> </html> | cs |
결과
div 요소의 배경이 1초 간격으로 깜빡거린다
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 transform : scale - 요소 크기변경 (0) | 2017.06.22 |
|---|---|
| HTML5/CSS3 transform : translate - 요소 이동 (0) | 2017.06.21 |
| HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다 (0) | 2017.06.19 |
| HTML5/CSS3 그라디언트 (0) | 2017.06.18 |
| HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정 (0) | 2017.06.17 |