-
[CSS] 트랜지션 속성, 애니메이션 속성Web/CSS 2020. 5. 16. 05:43
[css] 트랜지션 속성
객체에 동작이 일어날 때 속도를 조절 가능케 하는 속성
[함께 사용 가능한 스타일 속성]
위치 속성 -top, left, bottom, right
크기 속성 - width, height
박스 속성 - margin, padding
테두리 속성: border-width, border-radius, border- color
색상 속성: color, background-color
투명도 속성: opacity
변환 속성: transform
트랜지션 속성
transition: 모든 트랜지션 속성을 한 번에 사용합니다.
transition-delay: 이벤트 발생 후 몇 초 후에 재생할 지 지정합니다.
transition-duration: 몇 초 동안 재생할지 지정합니다.
transition-property: 어떤 속성을 변형할지 지정합니다.
transition-timing-function: 수치 변형 함수를 지정합니다.
.box{
width: 200px;
height: 200px;
position: relative;
background-color: rgb(198, 236, 215);
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: 900;
color: white;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
.box:hover{
width: 400px;
height: 400px;
background-color: rgb(58, 106, 94);
line-height: 400px;
transition-duration: 2s;
/* 부드럽게 ~시간동안 표현 */
transition-timing-function: ease-in-out;
linear: 일정한 속도
[css] 애니메이션 속성
지정한 이름을 통해 애니메이션의 지속시간, 속도 조절 등을 적용시킬 수 있는 속성
-애니메이션 속성
animation: 애니메이션 한번에 모두 적용(이름 진행시간 가속도 지연시간 반복횟수 연결방향)
animation-delay: 이벤트 발생 후 몇 초 후에 재생할지 지정
animation-direction: 애니메이션 진행 반향을 설정 (alternate: 위치값 이동 반복 / normal: 시작점으로 복귀 반복)
animation-duration: 애니메이션을 몇 초 동안 재생할지 지정
animation-iteration-count: 애니메이션 반복 횟수를 지정(infinite- 무한반복, 3 -3회 반복)
animation-name: 애니메이션 이름을 지정
animation-play-state: 애니메이션 재생 상태를 지정 (paused- 중지 / 반응선택자와 함께 사용 생략)
animation-timing-function: 수치 변형 함수를 지정(linear, ease, ease-in, ease-out, ease-inout)
@keyframes
애니메이션이 변경되는 시작과 끝점에 대한 스타일을 지정
animation-name: 사용자가 직접 지정한 이름
시작 시간의 선택자: from 혹은 0%
끝나는 시간의 선택자: to 혹은 100%
중간시간의 선택자를 지정: 50%(필요에 따라 적용)
css 스타일: 각 스테이지(구간)에 적용시킬 스타일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>media</title>
<style>
*{
margin: 0;
padding: 0;
}
#all{
width: 200px;
height: 200px;
background-color: beige;
text-align: center;
line-height: 200px;
border-radius: 200px;
font-size: 18px;
font-weight: 900;
color: rgb(84, 71, 71);
/* 1. 이름과 실행될 애니메이션 속성 지정 */
position: absolute;
/* 위치 이동을 위한 장치 */
animation-name: rint;
/* rint라는 이름을 지정 */
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
/* 무한반복 */
animation-delay: 1s;
animation-direction: alternate;
/* 시작과 끝점을 좌우 반복 */
}
@keyframes rint {
from{
left: 0px;
transform: rotate(0deg);
/* 회전각도 0에서 시작 */
}
to{
left: 500px;
transform: rotate(360deg);
/* 각도 360에서 끝 */
}
}
#all:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div id="all">
<p>animation</p>
</div>
</body>
</html>
www.evernote.com/l/Alcc0YXsCI9KxYXDoOZv9f8lpqkmDXGH5qI/
[css] 트랜지션 속성, [css] 애니메이션 속성
[css] 트랜지션 속성 객체에 동작이 일어날 때 속도를 조절 가능케 하는 속성 [함께 사용 가능한 스타일 속성] 위치 속성 -top, left, bottom, right 크기 속성 - width, height 박스 속성 - margin, padding 테두리
www.evernote.com
'Web > CSS' 카테고리의 다른 글
[CSS] 반응형 웹, 반응형 설계 - 가변 그리드, 반응형 설계 - 미디어 쿼리 (0) 2020.05.16 [css] 트랜스폼 속성, 스프라이트 이미지 , 모바일 웹의 이해 (0) 2020.05.16 [CSS] 선택자의 형태, 선택자의 활용 (0) 2020.05.16 [CSS] 위치 속성, 위치 속성 응용 레이아웃 (0) 2020.05.16 [CSS] 배경이미지 & 색상 (0) 2020.05.16