<body>
<h1>애니메이션</h1>
<div class="div1"></div>
<div class="div2"></div>
<img src="sample/image/iconsample.PNG">
</body>
</html>
＊ 애니메이션 지정
#1_ 시작과 끝만 있는 경우
@keyframes trans1{
from{
background: green;
border: 1px solid black;
}
to{
background: yellow;
border-radius: 50%;
transform: perspective(300px) rotate(360deg);
border: 3px solid red;
}
}
#2_ 여러개의 액션이 있는 경우(%를 이용해서 지점을 지정한다.)
@keyframes trans2{
0%{
background-color: green;
border: 3px solid black;
}
30%{
transform: translate(50px
}
50%{
background-color: hotpink;
transform: scale(1.2);
border: 3px solid yellow;
}
100%{
background-color: blue;
transform: rotateZ(45deg)
border:3px solid red;
}
}
#1_
.div1{
margin: 100px;
width: 100px;
height: 100px;
background-color: gray;
/* 여기까지가 시작 위치 */
animation-name: trans1;
animation-duration: 5s;
animation-direction: normal;
naimation-interation-count: 10;
}animation-name: keyframe에서 정한 이름을 적용할 요소 스타일에 작성한다.
animation-duration: 애니메이션의 실행 시간을 지정하는 속성
animation-direction: 애니메이션을 반복할 때 처음부터 시작할지 끝에서 역순으로 시작할지 선택한다.
- alternate: 한 번 진행하면 역순으로 진행되는 것(역순으로 돌아온다)
animation-interation-count: 애니메이션을 몇 번 반복할지 설정한다.
- infinite: 무한 반복
#2_
.div2{
margin: 100px;
width: 100px;
height: 100px;
animation-name: trans2;
animation-duration: 2s;
animation-direction: alternate;
animation-interation-count: infinite;
}
#3_
img{
margin-left: 100px;
width: 500px;
height: 500px;
animation: trans1 5s 10 alternate;
}
animation: 애니메이션 전체 속성을 지정할 수 있는 속성
선택자 { animation: name duration timing-function delay interator-count direction; }
'KH 정보교육원 > CSS CLASS' 카테고리의 다른 글
| 29. 네비게이션 바 만들기 (1) | 2020.05.07 |
|---|---|
| 28. 애니메이션 실습 (0) | 2020.05.07 |
| 26. 트랜지션 (0) | 2020.05.07 |
| 25. 변형 실습 문제 (0) | 2020.05.06 |
| 24. 변형 3_ (0) | 2020.05.06 |