활기차게 움직여보고 싶어?
코딩하다보면 정적인 것보다 움직이는게 더 보기 좋더라구요.
역시 기술이 있다면 쳐발라야합니다.
오늘 알려드릴 방법은 애니메이션 사용법인데요.
예제 보시고 잘 따라해보세요.
아주 쉽게 만들었습니다.
html
사실 여기서 중요한 내용은 없고 div.box 하나 만들어준거네요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
css
이제 css도 적용해보겠습니다.
.box{
width:100px;
height:100px;
background: red;
position: relative;
-webkit-animation: boxmove 3s infinite; /* Safari 4.0 - 8.0 */
animation: boxmove 3s infinite;
}
/* 애니메이션 제작 */
@-webkit-keyframes boxmove {
0% {top: 0px;}
25% {top: -5px;}
75% {top: 3px}
100% {top: 0px;}
}
@keyframes boxmove {
0% {top: 0px;}
25% {top: -5px;}
75% {top: 3px}
100% {top: 0px;}
}
최대한 간단한 예제로 만들어봤는데, 이해가 되셨나요? 다음 포스팅에서 뵙겠습니다.
728x90
'프로그램 강좌' 카테고리의 다른 글
| [react.js]react-icons 사용하는 방법 (0) | 2019.09.12 |
|---|---|
| [js]classList 사용방법 (0) | 2019.09.05 |
| [html09]실전미션#1: 텍스트 직접 코딩해서 꾸며보기 (0) | 2019.08.16 |
| [html08]여백의 미: margin, padding #2 (0) | 2019.08.15 |
| [html07]여백의 미:margin, padding #1 (0) | 2019.08.14 |
