CSS @keyframes 이용하여 간단한 원 만들어보기
공부 링크 : https://lcw126.tistory.com/152
HTML+CSS (기초) animation 만들어서 적용하기 ( 공이 움직이는 모습)
<최종 화면> (예제에서는 10번 반복 튀기도록 하였다.) 원을 만들기 위해 우선 네모를 만들자. 사각형에 가로, 세로 길이의 반 만큼 border-radius 속성을 주면 원이 된다. 애니메이션 효과를 주기 위��
lcw126.tistory.com
코드
실행화면
이제 원을 움직여 보겠다.
코드
실행화면
이제 공을 튀겨보도록 하자.
코드
실행화면
전체코드
<!DOCTYPE html>
<html>
<head>
<style>
div#aa{
position: absolute;
background: darkslategray;
/* 원 모양 만들기 */
width: 50px;
height: 50px;
border-radius: 25px;
/* 아래에서 만든 애니메이션 적용하기 */
animation-name: bounce;
animation-duration: 3s;
animation-iteration-count: 10; /* 반복 횟수 */
}
/* 애니메이션 만들기! */
@keyframes myanim{
0% {left: 0px; top: 0px;}
50% {left: 200px; top: 0px;}
100% {left: 0px; top: 0px;}
}
/* 공 튀기는 애니메이션 만들어보기 */
@keyframes bounce{
0%, 100%{
bottom: 0px;
animation-timing-function: ease-out;
}
50%{
bottom: 200px;
animation-timing-function: ease-in;
}
}
</style>
</head>
<body>
<div id="aa"></div>
</body>
</html>