안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
@keyframes
- 여러 개의 상태를 표현 (from ~ to)
HTML 코드
<body>
<h1>animation</h1>
<div class="box"></div>
<img src="../../sample/image/hyunta.jpg" alt="" id="mydog">
</body>
CSS 코드
<style>
#mydog {
width: 100px;
border-radius: 50%;
margin: 50px;
}
.box {
width: 100px;
height: 100px;
background-color: hotpink;
border: 1px solid black;
margin: 50px;
}
body:hover .box {
animation-name: myframes; /* @keyframes 속성명 */
animation-duration: 3s;
animation-delay: .5s;
animation-timing-function: linear;
}
@keyframes myframes {
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(400px, 200px);
}
100% {
transform: translate(400px, 400px);
}
}
</style>
translate를 줄 때, 처음 시작 위치부터 px을 계산해야 합니다.
animation-iteration-count
- 반복횟수 (infinite : 무한반복)
animation-iteration-count: 2;
animation-direction
- 애니메이션 방향 설정
animation-direction: alternate-reverse; /* normal | reverse | alternate | alternate-reverse */
※ 이외 효과 보기
https://www.w3schools.com/cssref/css3_pr_animation-direction.asp
CSS animation-direction Property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
animation-fill-mode
- 애니메이션 시작전후 머무르게 될 위치
animation-fill-mode: forwards; /* 애니메이션 시작전후 머무르게 될 위치 */
모아쓰기
/* name duration timeing-function delay iteration-count direction fill-mode */
animation: myframes 3s linear .5s infinite forwards;
CSS 코드
<style>
#mydog {
width: 100px;
border-radius: 50%;
margin: 50px;
}
body:hover #mydog {
animation: myframes 2s infinite alternate backwards;
}
.box {
width: 100px;
height: 100px;
background-color: hotpink;
border: 1px solid black;
margin: 50px;
}
body:hover .box {
animation-name: myframes; /* @keyframes 속성명 */
animation-duration: 3s;
animation-delay: .5s;
animation-timing-function: linear;
animation-iteration-count: 2; /* infinite (무한반복) */
animation-direction: alternate-reverse; /* normal | reverse | alternate | alternate-reverse */
animation-fill-mode: backwards; /* 애니메이션 시작전후 머무르게 될 위치 */
}
body {
height: 100vh;
}
@keyframes myframes {
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(400px, 200px);
}
100% {
transform: translate(400px, 400px);
}
}
</style>
