728x90
속성효과
1. 불투명속성
마우스 올리면 선명하게 보이게 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스를올리면 선명하게 보이게 설정하기</title>
<style>
a:link {
opacity: 0.5;
}
/* :link 웹 문서에서 사용자가 방문하지 않았던 곳을 표시합니다.
*/
/* 링크선택자 : link, visited */
a:hover {
opacity: 1.0;
}
/* :hover는 웹 문서에서 사용자가 링크에
마우스 포인터를 올리는 순간을 나타냅니다.
*/
/* 반응선택자 : hover, active */
img {
opacity: 0.2;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h3>마우스를 올리면 선명하게 보입니다.</h3>
<div>
<a href="http://www.google.com">구글웹사이트</a>
</div>
<p></p>
<div>
<img src="pic.jfif">
</div>
</body>
</html>: 가상클래스선택자는 어떤 상태를 지정한다. 이런상태는 태그,id,class처럼
html 문서상에 있는 것이 아니다.
가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며,
이를 가상 (추상)클래스라 한다.
텍스트상자안의 배경이미지를 반투명하게 처리하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트상자안의 배경이미지를 반투명하게처리하기</title>
<style>
div.background{
background:url(sky.jpg) repeat;
border: 1px solid black;
}
div.box{
margin: 30px;
background-color : #ffffff;
border: 2px solid blue;
opacity: 0.5;
}
div.box p{
margin: 5%
font-weight: bold;
color: #000000;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="box">
<p>html5 웹프로그래밍</p>
</div>
</div>
</body>
</html>마우스를 올리면 힌트와 정답 보여주기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스를올리면힌트와정답보여주기</title>
<style>
div.tip{
opacity: 0.2;
}
div.ans{
opacity: 0.0;
}
div.tip:hover {
opacity: 1.0;
color: red;
}
div.ans:hover {
opacity: 1.0;
color: blue;
}
</style>
</head>
<body>
<p>문제] css3에서 불투명도를 적용하기 위한 속성은?</p>
<p>1. border</p>
<p>2. opacity</p>
<p>3. transparency</p>
<p>4. visible</p>
힌트] <div class ="tip">불투명을 뜻하는 영문단어를 찾아보세요</div>
<p></p>
정답] <div class="ans">정답은 2번입니다</div>
</body>
</html>2. 가시성속성
가시성 visibility : hidden, 디스플레이 visibility : visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.v1{
visibility:hidden;
border: 1px dotted red;
}
/* 가시성속성- 보이지 않도록 설정 : 공간있음 */
.v2{
visibility: visible;
border: 1px dotted red;
}
.v3{
display: none;
border: 1px dotted red;
}
/* 디스플레이속성-보이지 않도록 설정: 공간삭제 */
</style>
</head>
<body>
<div class="v1">
<img src="sky.jpg">
</div>
<div class="v2">
<img src="sky.jpg">
</div>
<div class="v3">
<img src="sky.jpg">
</div>
<div class="v2">
<img src="sky.jpg">
</div>
</body>
</html>3. 형식변화속성
블록->인라인 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스가로길이늘리기</title>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
border: 1px solid red;
transition: width 2s;
}
/* 트렌지션 효과 시간(초) */
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>마우스를 올리면 박스가 늘어납니다</div>
</body>
</html>인라인->블록 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul.in li {
display: inline;
background-color: yellow;
border: 1px solid;
border-color: blue;
margin: 3px;
padding: 5px;
}
</style>
</head>
<body>
<h4>[블록형식]</h4>
<ul>
<li><a href="http://www.google.com">google</a></li>
<li><a href="http://www.apple.com">apple</a></li>
<li><a href="http://www.oracle.com">oracle</a></li>
</ul>
<h4>[인라인형식으로변환후]</h4>
<ul class="in">
<li><a href="http://www.google.com">google</a></li>
<li><a href="http://www.apple.com">apple</a></li>
<li><a href="http://www.oracle.com">oracle</a></li>
</ul>
</body>
</html>4. 백그라운드속성(그레디언트효과)
선형그레이디언트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선형그라디언트</title>
<style>
#grad1{
height: 70px;
background: red;
background: linear-gradient(270deg, red, yellow);
}
/* to left */
#grad2{
height: 70px;
background: red;
background: linear-gradient(red, yellow, green);
}
/* to top */
#grad3{
height: 70px;
background: red;
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
/* to top */
#grad4{
height: 70px;
background: red;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
/* to left: 270deg */
</style>
</head>
<body>
<h4>2색 선형 그라디언트</h4>
<div id="grad1"></div>
<h4>3색 선형 그라디언트</h4>
<div id="grad2"></div>
<h4>7색 선형 그라디언트</h4>
<div id="grad3"></div>
<h4>2색 선형 그라디언트(to rignt)</h4>
<div id="grad4"></div>
<p><strong>참고:</strong>최신브라우저를 사용해주세요</p>
</body>
</html>원형그레이디언트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>원형그라디언트</title>
<style>
#grad1{
height: 70px;
background: red;
background: radial-gradient(yellow,green);
}
#grad2{
height: 70px;
background: red;
background: radial-gradient(red, yellow, green);
}
#grad3{
height: 70px;
background: red;
background: radial-gradient(red 5%, yellow 15%, green 60%);
}
#grad4{
height: 100px;
width: 150px;
background: red;
background: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h4>기본 2색 원형 그라디언트</h4>
<div id="grad1"></div>
<h4>3색 원형 그라디언트</h4>
<div id="grad2"></div>
<h4>색상 영역지정 (%단위) 원형 그라디언트</h4>
<div id="grad3"></div>
<h4>원형 모양지정 그라디언트(eclipse, circle)</h4>
<div id="grad4"></div>
<p><strong>참고:</strong>최신브라우저를 사용해주세요</p>
</body>
</html>2차원 변환 효과
1. 2차원변환함수
평행이동변환 translate()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>평행이동변환하기</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px dotted black;
background-color: yellow;
}
div#box2 {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div id="box1"> 박스 1 </div>
<div id="box2"> 박스 2 </div>
</body>
</html>회전변환 rotate()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회전변환하기</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px dotted black;
background-color: lightgreen;
margin:30px;
}
div#box1{
transform: rotate(45deg);
}
div#box2{
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div>기본박스(0deg)</div>
<div id="box1">박스1(45deg)</div>
<div id="box2">박스2(-90deg)</div>
</body>
</html>크기변환 scale()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>크기변환하기</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px dotted black;
background-color: skyblue;
margin:50px;
}
div#box1{
transform: scale(0.5, 0.5);
}
div#box2{
transform: scale(2, 1.5);
}
</style>
</head>
<body>
<div>기본박스</div>
<div id="box1">박스1(0.5배 축소)</div>
<div id="box2">박스2(가로2배, 세로1.5배 확대)</div>
</body>
</html>기울기변환 skewX() skewY()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기울기변환하기</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px dotted black;
background-color: lightgreen;
margin:50px;
}
div#box1{
transform: skewX(50deg);
}
div#box2{
transform: skewY(-30deg);
}
div#box3{
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div>기본박스</div>
<div id="box1">박스1 (x축으로 50deg)</div>
<div id="box2">박스2 (y축으로 -30deg)</div>
<div id="box3">박스2 (x,y축으로 20,10deg)</div>
</body>
</html>2차원행렬구조변환 matrix(n,n,n,n,n,n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2차원행렬구조변환하기</title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid black;
background-color: silver;
text-align: center;
}
div#box1{
transform: matrix(1, 0, 0, 1, 100, 0);
}
div#box2{
transform: matrix(1, 1, -1, 1, 50, 50);
}
div#box3{
transform: matrix(1, 0, 1, 1, 50, 100);
}
div#box4{
transform: matrix(1, 2, 2, 1, 50, 150);
}
/* 이 메소드는 2D 변형(transform)과 관련된 6개의 매개변수를 가집니다.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());*/
/* 괄호안에 쉼표 다음 스페이스(여백)이 들어가지 않으면 안됌 */
</style>
</head>
<body>
<div>기본박스</div>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>혼합변환하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>혼합변환하기1</title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid black;
background-color: silver;
text-align: center;
}
div#box1{
transform:
rotate(45deg) scale(1.5) skew(30deg)
translate(50px);
}
div#box2{
transform:
translate(200px) rotate(-90deg)
scale(2);
}
</style>
</head>
<body>
<div>기본박스</div>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>혼합변환하기2</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: yellow;
}
.c1:hover{
transform-origin: 50% 50% 0px;
transform: translate(0px, 0px)
rotate(-45deg); scale(0.7);
background: green;
}
/* CSS 속성은 요소 변형의 원점을 설정합니다 .transform-origin */
</style>
</head>
<body>
<div class="c1">박스안에 마우스를 올리면
무엇이 보일까요?
</div>
</body>
</html>3차원 변환 효과
1. 3차원변환함수
X Y Z 축 z축은 깊이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3차원변환함수</title>
<!-- z축은 깊이 -->
<style>
div{
background-color: green;
height: 150px;
width: 150px;
}
.container{
background-color: white;
border: 1px solid black;
}
.transformed:hover{
backface-visibility: visible;
transform-origin: 50% 42%;
transform: perspective(500px)
/* prespective3차원관점변환(depth)*/
rotateY(50deg)
rotateX(0deg);
/* rotateX
가로축을 중심으로 요소를 회전
rotateY
세로축을 중심으로 요소를 회전*/
}
.transformed2:hover{
backface-visibility: visible;
transform-origin: 50% 42%;
transform: perspective(500px)
rotateY(0deg)
rotateX(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="transformed">박스1</div>
</div>
<p></p>
<div class="container">
<div class="transformed2">박스2</div>
</body>
</html>변화효과
1.변화속성
박스가로길이늘리기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스가로길이늘리기</title>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
border: 1px solid red;
transition: width 2s;
}
/* 트렌지션 효과 시간(초) */
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>마우스를 올리면 박스가 늘어납니다</div>
</body>
</html>박스를회전시키며 크기와테두리색상 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스를회전시키며 크기와테두리색상변경</title>
<style>
div {
margin: 50px;
width: 100px;
height: 100px;
background: yellow;
border: 1px solid red;
transition: width 3s,
height 3s,
border 3s,
transform 3s;
}
div:hover{
width: 200px;
height: 200px;
border: 3px solid blue;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>마우스를 올리면 박스가 회전하며 커진다</div>
</body>
</html>
2. transition-property속성
변환 효과 대상지정
마우스 올리면 여러속성이 변함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition-property속성</title>
<!-- 변화효과를 적용할 속성들 나열 -->
<style>
div{
width: 100px;
height: 100px;
background: orange;
transition-property:
width, background, color;
}
div:hover{
width: 400px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div>마우스를 올리면 여러속성이 변함</div>
</body>
</html>3. transition-duration속성
변환 효과 지속시간 설정
색상이 10초동안 서서히 변함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition-duration속성</title>
<!-- 변화가 지속되는 시간지정 -->
<style>
div{
width: 280px;
height: 100px;
background: orange;
transition: background;
transition-duration: 10s;
}
div:hover {
background: blue;
}
</style>
</head>
<body>
<div>색상이 10초동안 서서히 변함</div>
</body>
</html>4. transition-timing-function속성
linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier
변환 효과 타이밍 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition-timing-function 속성</title>
<!-- 변화효과의 타이밍설정하기 -->
<style>
div {
width: 100px;
height: 50px;
background: red;
color : yellow;
border: 1px solid black;
transition: width 3s
}
#div1 {transition-timing-function : linear; }
#div2 {transition-timing-function : ease; }
#div3 {transition-timing-function : ease-in; }
#div4 {transition-timing-function : ease-out; }
#div5 {transition-timing-function : ease-in-out; }
#div6 {transition-timing-function :
cubic-bezier(0.1, 0.0, 0.1, 1.0); }
div:hover {width: 400px;}
</style>
</head>
<body>
<div id="div" style="top:100px"> linear</div>
<div id="div" style="top:150px"> ease</div>
<div id="div" style="top:200px"> ease-in</div>
<div id="div" style="top:250px"> ease-out</div>
<div id="div" style="top:300px"> ease-in-out</div>
<div id="div" style="top:350px"> cubic-bezier</div>
<p>lineaer: 처음부터 끝까지 같은속도 <br>
ease: 느리게 시작하여 점점 빨라졌다 느리게 끝남 <br>
ease-in: 느리게 시작하여 점점빨라지다 일정속도에 다다르면 같은속도유지 <br>
ease-out: 일정한속도의 등속변화로 시작해서 점점 느려지면서 끝남 <br>
ease-in-out: 느리게 시작하여 느리게 끝남 <br>
cubic-bezier(n, n, n, n): 처음과 끝의 속도를 설정 <br>
</p>
</body>
</html>5. transition-delay속성
변환 효과 지연시간 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition-delay 속성1</title>
<!-- 변화효과의 지연시간 설정하기 -->
<style>
div {
margin: 50px;
width: 200px;
height: 200px;
background: yellow;
border: 5px solid black;
transition-duration:5s;
/* 변화가 지속되는시간지정 :transition-duration */
transition-delay: 3s;
}
div:hover { transform: rotate(180deg);}
</style>
</head>
<body>
<div> 마우스 올리고 3초 후에 박스가 180도 회전</div>
</body>
</html>홈페이지 메뉴 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홈페이지메뉴만들기</title>
<style>
a {
text-decoration: none;
color: white
}
div {
position: absolute;
left: 0px;
width: 80px;
height: 50px;
background: #ff8080;
border: 1px solid red;
transition-property: width background;
/* transition-property: 변화효과를 적용할 속성들 나열 */
transition-duration:2s;
/* 변화가 지속되는시간지정 :transition-duration */
}
div:hover {
width: 200px;
transition-timing-function: linear;
/* 변화효과의 타이밍설정하기 */
background: #ff0000;
color: white;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div style="top:50px">
<a href="#" target="new">HOME</a></div>
<div style="top:100px">
<a href="#" target="new">ABOUT</a></div>
<div style="top:150px">
<a href="#" target="new">NEWS</a></div>
<div style="top:200px">
<a href="#" target="new">STUDY</a></div>
<div style="top:250px">
<a href="#" target="new">CONTACT</a></div>
</body>
</html>애니메이션의 원리
1. 애니메이션의원리
2. 애니메이션속성
무한반복하며 좌우로 이동하는 박스만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>무한반복하며 좌우로 이동하는 박스만들기</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: relative;
animation: boxmove 5s linear infinite alternate;
}
/* alternate : 애니메이션이 양방향으로 재생된다 */
@keyframes boxmove {
from {left: 0px;}
to {left: 300px;}
}
/* @keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써
CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. */
</style>
</head>
<body>
<div>애니메이션박스</div>
<p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>3. animation-delay속성
웹문서가 로드된후 일정시간 후 애니메이션 시작하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-delay속성</title>
<style>
div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s linear infinite alternate;
}
#box1 {
animation-delay: 3s;
}
#box2 {
animation-delay: 5s;
}
@keyframes boxmove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="box1"> 애니메이션박스1 </div>
<div id="box2"> 애니메이션박스2 </div>
<p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>4. ainmation-direction속성
nomal / reverse / alternate / alternate-reverse
애니메이션의 진행방향 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-direction 속성</title>
<style>
div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s linear infinite;
}
#box1 {
animation-delay: 3s;
animation-direction: reverse;
/* 애니메이션이 역방향으로 재생 */
}
#box2 {
animation-delay: 5s;
animation-direction: alternate-reverse;
}
/* 애니메이션이 양방향(역)으로 재생된다 */
@keyframes boxmove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="box1"> 애니메이션박스1 </div>
<div id="box2"> 애니메이션박스2 </div>
<p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>5. animation-iteration-count속성
애니메이션의 반복 횟수 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-iteration-count 속성</title>
<style>
div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s;
}
#box1 {
animation-delay: 3s;
animation-direction: reverse;
/* 애니메이션이 역방향으로 재생 */
animation-iteration-count: 2;
/* 애니메이션이 반복 재생되는 횟수설정 */
}
#box2 {
animation-delay: 5s;
animation-direction: alternate-reverse;
animation-iteration-count: 5;
}
@keyframes boxmove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="box1"> 애니메이션박스1 </div>
<div id="box2"> 애니메이션박스2 </div>
<p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>6. animation-timing-function속성
애니메이션의 타이밍 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-timing-function 속성</title>
<style>
div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s alternate;
}
#box1 {
animation-delay: 1s;
animation-iteration-count: 2;
animation-timing-function: ease;
/* 애니메이션의 시작과 끝 타이밍지정 */
}
#box2 {
animation-delay: 2s;
animation-iteration-count: 3;
animation-timing-function: linear;
/* 애니메이션의 시작과 끝 타이밍지정 */
}
#box3 {
animation-delay: 3s;
animation-iteration-count: 3;
animation-timing-function: ease-out;
/* 애니메이션의 시작과 끝 타이밍지정 */
}
@keyframes boxmove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="box1"> 애니메이션박스1 ease </div>
<div id="box2"> 애니메이션박스2 linear</div>
<div id="box3"> 애니메이션박스3 ease-out</div>
<p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
<p>lineaer: 처음부터 끝까지 같은속도 <br>
ease: 느리게 시작하여 점점 빨라졌다 느리게 끝남 <br>
ease-out: 일정한속도의 등속변화로 시작해서 점점 느려지면서 끝남 <br>
</p>
</body>
</body>
</html>7. animation-play-state속성
paused / running
마우스 올리면 멈추게 하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-play-state 속성1</title>
<!-- 마우스올리면 멈추게 하기 -->
<style>
div {
width: 100px;
height: 50px;
background: red;
position: relative;
animation: boxmove 5s infinite alternate;
}
#box1 {
animation-delay: 1s;
animation-timing-function: ease;
/* 애니메이션의 시작과 끝 타이밍지정 */
}
#box2 {
animation-delay: 2s;
animation-timing-function: linear;
/* 애니메이션의 시작과 끝 타이밍지정 */
}
#box3 {
animation-delay: 3s;
animation-timing-function: ease-out;
/* 애니메이션의 시작과 끝 타이밍지정 */
}
@keyframes boxmove {
from { left : 0px;}
to { left : 300px;}
}
div:hover {
animation-play-state: paused;
}
/* 애니메이션일시정지 */
</style>
</head>
<body>
<div id="box1"> 애니메이션박스1 ease </div>
<div id="box2"> 애니메이션박스2 linear</div>
<div id="box3"> 애니메이션박스3 ease-out</div>
<p> 마우스를 올리면 멈춤</p>
<p><strong>참고:</strong> IE9 이하 혹은 낮은 버전에서 지원하지 않습니다</p>
</body>
</html>커튼을 치고 걷어내는 듯한 효과 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-play-state 속성2</title>
<!-- 커튼을 치고 걷어내는 듯한 효과만들기 -->
<style>
div {
width: 100px;
height: 100px;
position: absolute;
animation-duration: 5s;
animation-timing-function: linear;
/* lineer: 처음부터 끝까지 같은속 */
animation-delay: 2s;
animation-iteration-count: infinite;
animation-play-state: running;
/* 애니메이션을 재생한다 */
}
#div1 {
background-color: blue;
animation-direction: nomal;
/* 순방향으로 재생 : 기본값*/
animation-name: L-box;
}
#div2 {
background-color: yellow;
animation-direction: reverse;
animation-name: R-box;
}
@keyframes L-box {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
@keyframes R-box {
0% {left: 400px;}
50% {left: 200px;}
100% {left: 400px;}
}
</style>
</head>
<body>
<div id="div1"> 왼쪽박스</div>
<div id="div2"> 오른쪽박스</div>
</body>
</html>상하좌우로 움직이면서 색상 변하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-play-state 속성3</title>
<!-- 상하좌우로 움직이면서 색상변경 -->
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: colorbox 5s infinite;
animation-direction: alternate;
}
@keyframes colorbox {
from {background: red; left: 0px; top: 0px;}
25% {background: orange; left: 300px; top: 0px;}
50% {background: yellow; left: 300px; top: 300px;}
75% {background: green; left: 0px; top: 300px;}
to {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>점핑볼 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-play-state 속성4</title>
<!-- 점핑볼 만들기-->
<style>
@keyframes bounce {
from, to {
bottom: 0px;
animation-timing-function:ease-out;
}
/* ease-out: 일정한속도의
등속변화로 시작해서 점점 느려지면서 끝남 */
50% {
bottom: 200px;
animation-timing-function:ease-in;
}
/* ease-in: 느리게 시작하여 점점빨라지다
일정속도에 다다르면 같은속도유지 */
}
div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
animation-name: bounce;
animation-iteration-count: infinite;
}
#b1 {
left: 10px;
background: red;
animation-duration: 5s;
}
#b2 {
left: 50px;
background: blue;
animation-duration: 10s;
}
#b3 {
left: 90px;
background: green;
animation-duration: 3s;
}
#b4 {
left: 130px;
background: silver
animation-duration: 8s;
}
#b5 {
left: 170px;
background: black;
animation-duration: 1s;
}
</style>
</head>
<body>
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>
이미지 출처 : IT CookBook 한빛 모던웹을 위한 HTML5+CSS3 바이블
728x90
