애니메이션
개인적으로 CSS3의 꽃 중 하나라고 생각하는 애니메이션을 다루네요.
예전이면 자바스크립트나 제이쿼리로 구현했을 기능을 CSS를 사용해서 구현할 수 있어요.
CSS3 만세 !!
자 쉽게 말해 CSS의 애니메이션으로 다음과 같은 기능을 구현할 수 있어요.
animation
그럼 CSS 애니메이션 어떻게 구현하는지 알아볼게요.
애니메이션 사용 방법
선택자{animation:키프레임 이름, 시간, 반복 횟수} @keyframes 키프레임 이름{ from{시작할 CSS 속성 값) to{끝날 CSS 속성 값} }
키프레임이라는 이름을 정해 입력 한 후 해당 애니메이션의 작동 시간은 얼마이고, 이 애니메이션 효과를 몇번 작성할 것인지를 정해주며, 키프레임에서는 어떤 행동을 할 것인지에 대한 CSS 속성을 작성합니다.
다음은 하늘색 박스가 왼쪽에서 오른쪽으로 3초만에 이동하는 예제입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 애니메이션 </title> <link rel="stylesheet" href="./cssReset.css"> <style> .move{width:100px;height:50px;background:skyblue;position:relative; animation: move 3s 1} @keyframes move { from{ left:0 } to{ left:1000px } } </style> </head> <body> <p class="move"> hello world </p> </body> </html>
실행 버튼을 눌러 결과를 확인하면 박스가 움직임을 확인할 수 있습니다.
이번에는 from ~ to 단위에 %를 더해 CSS를 적용하는 방법에 대해 알아볼게요.
애니메이션 사용 방법
선택자{animation:키프레임 이름, 시간, 반복 횟수} @keyframes 키프레임 이름{ from{시작할 CSS 속성 값) 10%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 20%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 30%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 40%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 50%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 60%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 70%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 80%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} 90%{10% 정도의 진행 상황에 적용할 CSS 속성과 값} to{끝날 CSS 속성 값} }
위와 같이 하셔도 좋고, 10% 40% 60% 이런식도 좋습니다.
다음은 %를 활용한 예제입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS 애니메이션 </title> <link rel="stylesheet" href="./cssReset.css"> <style> .move{width:100px;height:80px;border-radius:20px;background:skyblue;position:relative; animation: move 3s infinite} @keyframes move { from{ left:0 } 10%{width:120px;height:100px;left:300px} 30%{width:150px;height:130px;left:500px} 50%{width:300px;height:260px;left:800px} 70%{width:150px;height:130px;left:500px} 90%{width:120px;height:100px;left:300px} to{ left:0px } } .move p{float:left;width:100%;text-align:center;margin:30px 0 0 0;font-size:20px;color:#fff; font-weight:bold} </style> </head> <body> <div class="move"> <p>hello world </p></div> </body> </html>