animation속성을 이용해 css에서도 애니메이션이 가능하다.
주로 transform의 속성인 크기, 위치값, 회전, 색상, 투명도 등에 애니메이션을 사용한다.
| 속성 | 속성값 | 설명 |
| animation-name | ani(직접 지어주는 이름) | 애니메이션의 이름을 지정 |
| animation-duration | 2s | 애니메이션 재생 시간(s) |
| animation-timing-function | 기본값 : ease linear | ease-in | ease-out | ease-in-out ... |
애니메이션 가속도(ease) 출발이나 도착지점에 빠르기를 지정하는 속성 |
| animation-delay | 2s | 애니메이션 지연 시간(s) 일정 시간 이후, 애니메이션이 재생되도록 함 |
| animation-iteration-count | number | infinite | 재생횟수 지정, 무한반복을 할 때 infinite를 사용한다. |
| animation-direction | reverse | alternate | 반복재생시 순서 |
| animation-fill-mode | forwards | backwards | 마지막키프레임의 값 유지 |
| animation-play-state | running | pause | 재생하거나 일시정지 |
자주 사용하는 속성은 위의 3가지, 무한반복 정도이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column | animation 복습</title>
<style>
body{background: #000;color:#aaa;}
img{width:30%; float: left;margin:0 20px;}
section{
column-count:2;
column-gap:20px;
column-rule:double 4px #aaa;
}
h1{
width:550px;
height:120px;
line-height: 100px;
border: 10px solid #fff;
padding:5px;
margin:50px;
box-sizing: border-box;
text-align: center;
animation:ani 2s infinite;
}
@keyframes ani{
0%{background: #ff9292; color:#333;width:800px;}
50%{background: #a292ff; color:#fff;width:550px;}
100%{background: #ff9292; color:#333;width:800px;}
}
</style>
</head>
<body>
<h1> animation 의 속성</h1>
<section>
<img src="img1/vis01_wood.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, sed, ducimus, dolore voluptatum dicta commodi delectus odit ea voluptate nesciunt perferendis blanditiis aliquid quam necessitatibus voluptates enim doloremque mollitia atque.
</p>
</section>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| 레이아웃 기초 1 (0) | 2021.02.02 |
|---|---|
| img의 배치 활용 (0) | 2021.02.01 |
| :focus selector - 2 (0) | 2021.02.01 |
| :focus selector - 1 (0) | 2021.02.01 |
| multi-column (0) | 2021.02.01 |
