animation은 속성을 시간에 따라 변화를 줄 수 있도록 하는 효과이며,
@keyframes와 함께 사용합니다.
animation 속성
animation-name : 애니메이션 효과에 이름을 설정해야 @keyframes에 설정한 명령이 실행됩니다.
animation-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 설정합니다.
animation-delay : 애니메이션 효과가 몇초 지난 후 실행될지 설정합니다.
animation-timingfunction : 애니메이션이 적용되는 속도를 설정합니다.
animation-direaction : 애니메이션 진행방향을 설정합니다.
animation-iteration-count : 애니메이션 반복 횟수를 설정합니다.
animation-play-state : 애니메이션을 멈추거나 시작할 수 있습니다.
animation-fill-mode : 애니메이션 시작 전,후 상태값을 설정합니다.
animation-timingfunction은 애니메이션이 적용되는 속도를 지정합니다.
transition-timing-function: linear; -> 등속
transition-timing-function: ease; -> 느리게 시작했다가 빨라졌따가 다시 느려짐
transition-timing-function: ease-in; -> 점점 빨라짐
transition-timing-function: ease-in-out; -> 처음과 끝이 느림
transition-timing-function: ease-out; -> 점점 느려짐
animation-diraction은 애니메이션 진행 방향을 설정하는 속성입니다.
animation-diraction: normal; -> 기본값으로 애니메이션을 정방향인 to -> from으로 재생합니다.
animation-diraction: alternate; -> 정방향인 to -> from -> to 으로 재생합니다.
animation-diraction: reverse; -> 반대방향인 from -> to로 재생합니다.
animation-diraction: alternate-reverse; -> 반대방향인 from -> to -> form으로 재생합니다.
animation-iteration-count는 애니메이션 반복 횟수를 설정하는 속성입니다.
animation-iteration-count: 1; -> 기본값은 1이며, 숫자를 입력하면 입력한 숫자만큼 애니메이션을 재생합니다.
animation-iteration-count: infinite; -> 애니메이션효과가 무한반복 됩니다.
animation-play-state는 애니메이션을 멈추거나 시작할 수 있게 하는 속성입니다..
animation-play-state: running; -> 기본값으로 애니메이션을 재생합니다.
animation-play-state: paused; -> 애니메이션을 멈추게 합니다.
animation-fill-mode는 애니메이션 시작 전,후 상태값을 설정합니다.
animation-fill-mode: none;
시작(from)에 설정한 스타일을 적용하지 않고 대기합니다.
애니메이션 실행 전 상태로 되돌리고 종료합니다.
animation-fill-mode: forwards;
시작(from)에 설정한 스타일을 적용하지 않고 대기합니다.
애니메이션이 끝난 상태 그대로 종료합니다.
animation-fill-mode: backwards;
시작(from)에 설정한 스타일을 적용하고 대기한다.
애니메이션 실행 전 상태로 되돌리고 종료합니다.
animation-fill-mode: both;
시작(from)에 설정한 스타일을 적용하고 대기한다.
애니메이션이 끝난 상태 그대로 종료합니다.
animation효과를 한줄로 입력하는 방식입니다.
animation: name, duration, timing-function, delay, interation-count, direction, fill-mode, play-state
animation:sunday 5s 2s infinite alternate;
animation 이름은 sunday, 2초 딜레이 후 5초동안 무한반복하고 0% -> 100% -> 0%로 재생됩니다.
<body>
<h1>Animation 효과</h1>
<p>css animation 효과 입니다.</p>
</body>
<style>
*{margin:0; padding:0;}
li{list-style: none;}
body{margin:20px; font:20px "Arial", Gulim;}
p{width:50px; height:50px; padding:10px; background:#c00; color:#fff; font-size:20px;
animation:sunday 5s 2s infinite alternate;
-webkit-animation:sunday 5s infinite alternate;
-moz-animation:sunday 5s infinite alternate;
-o-animation:sunday 5s infinite alternate;
-ms-animation:sunday 5s infinite alternate;}
@keyframes sunday{
10%{background:#c00; width:50px; height:50px;}
25%{background:#c0c; width:100px; height:150px;}
45%{background:#f1c5d1; width:450px; height:120px;}
60%{background:#c7254e; width:450px; height:180px;}
80%{background:#FFFFAF; width:140px; height:180px;}
100%{background:#93CC8D; width:140px; height:120px;}
}
</style>애니메이션 적용된 결과 화면 입니다.↓
animation:sunday 4s 2 alternate-reverse;
애니메이션 이름:sunday, 4초동안 2번 반복되고 forn -> to -> from 으로 재생됩니다.
<body>
<div>animation</div>
</body>
<style>
*{margin:0; padding:10px;}
div{width:100px; height:100px; color:#fff; background-color:red; position:relative;
animation:sunday 4s 2 alternate-reverse;}
@keyframes sunday{
0% {background-color:#c0c; left:0px; top:0px;}
25% {background-color::#FFFFAF; left:200px; top:0px;}
50% {background-color:#f1c5d1; left:200px; top:200px;}
75% {background-color:#c7254e; left:0px; top:200px;}
1000% {background-color:#93CC8D; left:0px; top:0px;}
}
</style>애니메이션 적용된 결과 화면 입니다.↓
animation:box_ani 5s linear infinite alternate running;
animation이름: box_ani, 5초동안 등속되며 무한반복됩니다. 진행 방향은 to -> from -> to.
.box:hover{animation-play-state: paused; 를 설정해서
애니메이션 효과가 진행되는 div에 마우스를 올리면 잠시 멈춥니다.
<body>
<div class="box">animation</div>
</body>
<style>
*{margin:0; padding:10px;}
.box{width:150px; height:150px; color:#fff; background:red;
animation:box_ani 5s linear infinite alternate running;}
/*animation-duration:5s;
animation-timing-function: linear;
animation-delay:0;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state: running;*/
.box:hover{animation-play-state: paused;}
@keyframes box_ani{
0%{background:red; transform:translate(0,0) scale(0.3,0.3) rotate(0deg);}
10%{background:orange;}
20%{background:yellow;}
30%{background:green;}
40%{background:blue; transform:translate(150px, 20px) scale(1,1) rotate(180deg);}
70%{background:navy; transform:translate(50px,70px) scale(0.7,0.7) rotate(270deg);}
100%{background:red; transform:translate(0,0) scale(0.3,0.3) rotate(0deg);}
}
</style>애니메이션 적용된 결과 화면 입니다.↓
'IT > html + css' 카테고리의 다른 글
| [CSS] 선택자(id선택자, class선택자, nth-child, nth-of-type, odd, even등..) (0) | 2020.01.14 |
|---|---|
| [CSS] animation 여러가지효과 응용 연습! (0) | 2020.01.13 |
| [CSS] transition 애니메이션과 같이 사용되는 transition 속성 전환 (3) | 2020.01.07 |
| [CSS] transform속성 (translate,ratate,scale,skew) (0) | 2020.01.06 |
| [CSS] word-break / word-wrap 속성 (box-sizing) (0) | 2020.01.05 |
댓글