개발/HTML,CSS
2023.04.03 CSS의 트랜스폼, 애니메이션, 우선순위
상달군
2023. 4. 3. 16:26
728x90
목차
1. CSS의 트랜스폼(Transform)
- transform
- vender prefix(벤더 프리픽스)
- linear-gradient(그라데이션)
- transition(트랜지션)
2. CSS의 애니메이션(Animation)
- @keyframe
- animation-name (애니메이션 이름지정)
- animation-fill-mode (애니메이션 끝난후)
- animation-direction (애니메이션 진행방향)
- animation-duration (애니메이션 일어나는 시간)
- animation-iteration-count (애니메이션 반복할 횟수)
3.CSS의 우선순위
1. CSS의 트랜스폼(Transform)
1-1. transform
- 2차원 좌표에서 요소를 변형시키는 속성
- translate: 이동
- rotate: 회전
- scale: 확대축소
- skew: 경사 비틀기
1-2. vender prefix(벤더 프리픽스)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사
- w3c, CSS 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임
✔사용법 !!
-webkit- : 크롬,엣지를 위한 접두사
-o- : 오페라를 위한 접두사
-ms- : 익스플로러를 위한 접두사
-moz- : 파이어폭스를 위한 접두사
#gradient {
background-color: pink;
/*크롬 엣지를 위한 코드*/
background: -webkit-linear-gradient(left, pink,gray);
/* 오페라를 위한 코드*/
background: -o-linear-gradient(left, pink,gray);
/* 익스플로러를 위한 코드 */
background: -ms-linear-gradient(left, pink,gray);
/* 파이어폭스를 위한 코드 */
background: -moz-linear-gradient(left, pink,gray);
/* CSS 표준 문법 코드 */
background: linear-gradient(left, pink,gray);
}
- 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 한다.
1-3. linear-gradient(그라데이션)
- 색상의 그라데이션을 설정하는것
<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>
p{
width:600px;
padding: 20px;
border: 3px solid rgba(0, 0, 0, 0.5);
}
#translate {
transform: translate(30px, 50px);
background-color: deeppink;
}
#rotate {
transform: rotate(60deg);
background-color: gold;
}
#scale {
transform: scale(1.5, 1.2);
background-color: orange;
}
#skew {
transform: skew(30deg, 15deg); /* (x축의 기울기 각두, y축의 기울기 각도)*/
background-color: yellowgreen;
}
#gradient {
background-color: pink;
/*크롬 엣지를 위한 코드*/
background: -webkit-linear-gradient(left, pink,gray);
/* 오페라를 위한 코드*/
background: -o-linear-gradient(left, pink,gray);
/* 익스플로러를 위한 코드 */
background: -ms-linear-gradient(left, pink,gray);
/* 파이어폭스를 위한 코드 */
background: -moz-linear-gradient(left, pink,gray);
/* CSS 표준 문법 코드 */
background: linear-gradient(left, pink,gray);
}
</style>
</head>
<body>
<h2>transform</h2>
<p>original</p>
<p id="translate">translate</p>
<p id="rotate">rotate</p>
<p id="scale">scale</p>
<p id="skew">skew</p>
<p id="gradient">gradient</p>
</body>
1-4. transition(트랜지션)
- 요소에 추가할 css 스타일 전환 효과를 설정할 수 있다.
- 추가할 전환효과나 지속시간도 설정할 수 있다.
속성
- property: 요소에 추가할 전환효과를 설정
- timing-function: 전환효과의 값을 설정
- linear : 처음부터 끝까지 일정한 속도
- ease: 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝
- duration: 전환효과를 나타내는 시간을 설정
- delay: 설정한 시간만큼 대기하다 전환효과를 나타냄
<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;
float: left;
margin: 30px;
}
#bg-tr {
background-color: gold;
/*property, timing-function:ease, duration*/
transition: background-color ease 2s;
}
#bg-tr:hover {
background-color: red;
}
#border-tr{
background-color: deeppink;
border: 3px dotted black;
transition: all linear 2s;
}
#border-tr:hover {
background-color: pink;
border: 3px dotted gray;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>transition1</h2>
<div id="bg-tr"></div>
<div id="border-tr"></div>
</body>
transition1
* 폰트 굴리기 ~!~!
<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>
h2{text-align: center;}
#ex {
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
border: 5px solid black;
padding: 30px;
}
p {
text-align: center;
padding-top: 50px;
font-weight: bold;
}
.box {
font-size: 20px;
position: relative;
width: 150px;
height: 150px;
margin-bottom: 50px;
background-color: gold;
}
#ex:hover > .box{
transform: rotate(720deg);
margin-left: 650px;
}
#no-delay {
transition-duration: 3s;
}
#delay{
transition-delay: 1s;
transition-duration: 2s;
}
</style>
</head>
<body>
<h2>transition2</h2>
<div id="ex">
<div id="no-delay" class="box">
<p>(❁´◡`❁)</p>
</div>
<div id="delay" class="box">
<p>༼ つ ◕_◕ ༽つ</p>
</div>
</div>
</body>
transition2
(❁´◡`❁)
༼ つ ◕_◕ ༽つ
2. CSS의 애니메이션(Animation)
- 요소의 현재 스타일을 다른 스타일로 변환
2-1. @keyframe
-시작: 0%, from
-과정: 1%, 3%, 10%,....
-끝 : 100%, to
0% 5% 50% ..... 100%
장면1 장면2 장면3 ..... 끝 장면
🔴@keyframe의 속성들
2-2. animation-name
- 애니메이션의 이름을 설정
2-3. animation-fill-mode
- 애니메이션이 끝난 후 어떻게 처리할지 설정
-forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지 해줌.
2-4. animation-direction (애니메이션 진행방향)
- 애니메이션의 진행 방향을 정하는 속성
- reverse: 반대 순서로 진행
- alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
- reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행
2-5. animation-duration (애니메이션 일어나는 시간)
- 애니메이션이 일어나는 시간을 설정
2-6. animation-iteration-count (애니메이션 반복할 횟수)
- 애니메이션이 몇번 반복할지 설정
- infinite:무한반복
- 숫자: 숫자만큼 반복
<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>
.box{
margin-top: 100px;
margin-left: 100px;
padding: 20px;
height: 60px;
animation-name: moving;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-duration: alternate;
}
@keyframes moving{
/* 첫 장면*/
from {
width: 200px;
background-color: gold;
opacity: 0.5;
transform: rotate(0deg);
}
/*끝 장면*/
to {
width: 400px;
background-color: greenyellow;
opacity: 1;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>animation1</h2>
<div class="box">
<h3>CSS3 Animation</h3>
</div>
</body>사용 예)
animation1
CSS3 Animation
3.CSS의 우선순위
1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선
3. 내부, 외부, 인라인 시트 중 인라인을 우선시 적용
4. 계산식
- inline: 1000점
- id속성: 100점
- class, 속성 선택자: 10점
- element: 1점
5. !important를 적용하면 0순위
<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>css우선순위</title>
<style>
#id-style { background-color: deeppink;}
#id-style2 { background-color: deepskyblue;}
div {
display: block;
padding: 30px;
margin: 30px;
background-color: gold;
}
.class-style3 {
background-color: beige !important;
}
.class-style {
background-color: greenyellow;
}
.class-style2 {
background-color: pink;
font-size: 25px;
}
ul > li.li-class{
background-color: orange;
}
ul > li{
background-color: violet;
}
</style>
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<h2>css 우선순위</h2>
<div style="background-color: aqua;">div 1(인라인 스타일 우선: aqua)</div><!--aqua-->
<div id="id-style" class="class-style">div 2(greenyellow*틀림*) (id 점수 우선시 됐기 때문에 : deeppink)</div><!--deeppink-->
<div class="class-style">div 3(클래스 우선: greenyellow)</div><!--greenyellow-->
<div class="class-style2 class-style">div 4(같은 속성의 경우 나중에 적용한 요소가 우선: pink)</div><!--pink-->
<div>div 5(같은 요소일 경우 나중에 적용한 속성이 우선: purple)</div><!--purple-->
<ul>
<li class="li-class">li 1(점수가 높은 속성이 적용: orange)</li><!--orange-->
</ul>
<div id="id-style2" class="class-style3">div 6(!important 우선 :beige)</div><!--beige-->
</body>
728x90