과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권5애니메이션_210512
주제 : css
CSS Animation
css의 animation속성은 오프젝트를 회전시키거나 동적 움직임을 주는 속성이다. 뿐만 아니라 color속성 등을 함께 적용하여 다채롭게 구성할 수 있다.
transform 속성
오브젝트에 부여되는 움직임을 조정할 수 있다.
transform의 속성값
transform: rotate(45deg); == 오브젝트를 2차원 회전
transform: scale(0.5,0.5); == 오브젝트의 크기조절 (비율)
transform: skew(-10deg,20deg); == 오브젝트의 3차원 회전
transform: translate(100px,300px); == 오브젝트의 위치값
transform속성은 오브젝트를 움직이는 역활보다는 움직임의 목표값 개념이라고 이해된다.
transition 속성
오브젝트에 부여되는 animation속성의 움직임에 필요한 세부값(?)
transition의 속성값
transition-property: width; == 움직임값을 줄 오브젝트 속성
transition-duration: 2s; == 움직임이 완성되는 가동시간
transition-timing-function: linear; == 움직임의 형태(아마도 선형/ 비선형)
transition-delay: 1s; == (움직임의 가동 지연시간)
transiton속성은 transform속성으로 부여된 목표를 달성하기 위한 방법을 입력하는 속성으로 이해된다.
animation속성
animation속성은 오브젝트에 움직임을 transition 속성과 같은 방법으로 입력한다. animation 속성은 진행과정을 세분화하여 설정할 수있는 @keyframes속성과 함께 사용된다.
animation의 속성값
animation-name: changeWidth; == 속성의 이름, 사용자가 지정
animation-duration: 3s; == 움직임이 완성되는 시간
animation-timing-function: linear; ==움직임의 형태(선형/비선형)
animation-delay: 1s; == 움직임의 가동지연시간
animation-iteration-count: infinite; == 움직임의 반복횟수
animation-direction: alternate; == 움직임의 방향
animation속성과 함께 사용되는 @keyframes속성
@keyframes속성은 animation-name과 연결하여 사용하며 오브젝트에 부여된 움직임의 시작과 끝을 표현할 수 있고 퍼센트를 사용하여 진행과정의 중간 중간을 세부적으로 추가하고 설정할 수 있다.
from과 to를 사용(시작과 끝)
animation-name: A1;
@keyframes A1 {
from{}
to{}
%를 사용(진행과정을 세부적으로 설정)텍스트
animation-name: A1;
@keyframes A1 {
0%{}
25%{}
50%{}
75%{}
100%{}
등의 두가지 방법으로 설정이 가능하다.
animation속성과 transtion 속성은 기본적으로 닮아있다. 또 두속성 모두 한줄의 코드로 구성할 수 있다.
transition: width 2s linear 1s; animation: a-name 2s linear 1s infinite alternitve
이렇게 각 속성의 속성값들을 나열하여 사용할 수 있다. 이런 방법은 코드를 줄려 로딩시간을 앞당길 수 있다. 주의할점은 duration값과 delay값인데, 이는 사용 순서로 첫번째 숫자s값은 duration, 두번째 숫자값s는 delay값으로 사용된다. duration 값을 0s로 입력하고 delayr값만 적용할 수 있다.
animation을 적용하는데 도움이 되는 인터넷 툴
https://jeremyckahn.github.io/stylie/
animation 속성의 적용
.spin-lion{
width: 150px;
height: 150px;
background-color: blue;
/*animation-name: spin-lion ;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;*/
animation: spinLlion 1.5s linear infinite alternate 1s;
}
@keyframes spinLlion {
from{ transform: rotate(-10deg) }
to{ transform: rotate(10deg); }
}animation과 @keyframes를 사용하여 좌우로 도리도리(10도) 돌아가는 움직임을 오브젝트에 주었다. 주석처리된 부분과 한줄로 구성된 animation코드 모두 같은 기능을 수행한다.
<div class="outer-border">
<div class="inner-border"></div>
</div>
outer-border {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: solid 15px red;
border-radius: 50%;
animation: outerBorder 2s infinite ;
margin: 0 auto;
margin-top: 200px;
}
@keyframes outerBorder {
0%{border-color: red; transform: scale(1.0);}
25%{border-color: yellow; transform: scale(1.2);}
50%{border-color: blue;transform: scale(1.3)}
75%{border-color: green;transform: scale(1.2)}
100%{border-color: pink;transform: scale(1)}
}
.inner-border {
box-sizing: border-box;
width: 75px;
height: 75px;
border: 5px solid purple;
animation: innerBorder 2s infinite linear ;
}
@keyframes innerBorder {
0%{transform: rotate(0deg);}
25%{border-color: blue; border-width: 10px;}
50%{border-color: yellow; border-width: 20px;}
75%{border-color: green; border-width: 40px;}
100%{border-color: gray; border-width: 5px; transform: rotate(360deg);}이 코드는 배우는 입장에서 볼때, 참으로 많은 animation속성이 집약되어 있다고 생각한다. 오브젝트의 생상과 크기 움직임 심지어 경계의 크기까지.
부모-자식 관계의 오브젝트에서 부모 오브젝트에 적용된 animation속성은 자식에게도 적용되는 것을 알 수 있었다.
Title
Parapragh
<div class="hover-image">
<img src="https://lh3.googleusercontent.com/proxy/0fAx4xmJRpFbXEWO-Fj4jHsfts8kF_lrlFTSzKdwYS5czuYxe2yswzLi23Kdv4rr_UKMU6rd9yQc7r88MvcSmhhZrGy228N9szkp6rOHTUI0fmBNXHlvWLXGYBTVbxhJ">
<div class="image-info">
<h2>Title</h2>
<p>Parapragh</p>
</div>
</div>.hover-image{
cursor: pointer;
overflow: hidden;
position: relative;
width: 400px;
border: solid 10px #000000;
}
.hover-image img {
width: 100%;
vertical-align: middle;
transition: transform 0.3s linear;
}
.hover-image:hover img{
transform: scale(1.3);
}
.hover-image .image-info {
box-sizing: border-box;
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
left: 0;
bottom: -85px;
transition: bottom 0.3s linear;
}
.hover-image:hover .image-info{
bottom: 0;
}
.hover-image .image-info h2,
.hover-image .image-info p {
margin: 0;
padding: 0;
color: #ffffff;
}
.hover-image .image-info h2 {
font-size: 20px;
}
.hover-image .image-info p{
font-size: 15px;
}Review
시각적으로 다양한 변화를 확인할 수 있었던 오늘 강의는 이전 강의와 결이 크게 다르지 않았음에도 지루할 틈이 없었다. 그 중에서도 오늘 animation속성의 핵심을 고르라면 메뉴 버튼을 구성하는 부분과 마지막으로 실습한 이미지 부분이라고 생각한다.
animation 속성을 사용하는 목적은 다양하게 있겠으나 메뉴 버튼에 커서를 가저갔을때 변하는 오브젝트 그리고 이미지에 커서를 올렸을 때 나탄나는 움직임은 움직임 자체만으로 집중이 되는 것을 느꼈다.
웹페이지의 버튼과 이미지 그리고 다른 오브젝트들이 어떤 움직임을 가지고 어떻게 사용자에게 전달되는가를 설정한는 중요한 기능이라 생각한다. 또한 animation속성을 더욱 다양하게 활용하기 위해서는 오브젝트간의 관계설정이 중요하다는 생각이 들었다. 지금 나에게 어두운 부분이 오브젝트의 관계설정인데...
