1) 학습한 내용
오늘은 transform,transition,animation에 대해 알아보고 애니메이션 실습을 진행해 보았다.
1.transform,transition,animation
-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- css의 애니메이션 제작시 사용되는 여러속성들
transform 선택한 오브젝트의 크기를 확대,축소,각도회전,위치변경에 사용 -->
<!-- <div class="transform"></div> -->
<!-- <div class="transition"></div> -->
<!-- <div class="animation"></div> -->
<!-- <div class="spin-lion"></div> -->
</body>
</html> 1) transform
-css
.transform {
width: 300px;
height: 300px;
background-color: yellow;
/*transform: rotate(-10deg);*/
/*transform: scale(0.5,0.5);*/
/*transform: skew(-10deg,20deg);*/
/*transform: translate(100px,300px);*/
/*margin-left: 300px;*/
/*margin-top: 500px;*/
/* -webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
*/
/*transform: rotate(10deg);*/
}
/*trans form (참고사이트! https://www.w3schools.com/css/css3_2dtransforms.asp)
사용시 주의점
-사용하고있는 각 브라우저들의 여러 버전이 있는데, 하이버전들을 고려해야할때 이러한 접두사(prefix)들을 사용해야한다.
-크롬,사파리 - webkit , 파이어폭스 - moz , 익스플로러 - ms , 오페라 -o
예시)
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);(마지막에 디폴트 값으로 넣어준다.)
rotate(x deg): 2차원 적인 평면 회전효과,음수(왼쪽),양수(오른쪽)전달가능
scale(x,y): 내가 키우고 싶은 박스의 비율을 입력(x축의 몇 배, y축의 몇배)
skew(x축deg,y축deg): 선택한 영역의 각도에 영향을 미치는 속성,3차원적효과,음수(왼쪽),양수(오른쪽)전달가능
translate(xpx,ypx): 선택한 영역의 위치를 변경할때 사용(x축,y축)*/
2)transition
-css
.transition{
width: 300px;
height: 300px;
background-color: yellow;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
transition: width 2s linear , height 2s linear;
}
.transition:hover {
width: 600px;
height: 600px;
}
/* transition
:애니메이션이 자연스럽게 변화하는 과정을 보여주고싶을때 사용
transition-property: 변화시키고싶은것;
transition-duration: 변화하는데 걸리는 시간;
transition-timing-function: 움직이는 속도의 성격 지정 ; <linear(처음부터 끝까지 일정한 속도), ...>
transition-delay: 애니메이션 효과를 언제 발동시킬지;
transition: width 2s linear 1s ,(또 다른 변화 사용시 , 사용);
-이런 식으로 한줄로도 표현가능! but 순서는 상관 없으나, duration(먼저)과 delay(나중) 는 순서가 있다.
*/
3)animation
-css
.animation{
width: 300px;
height: 300px;
background-color: yellow;
animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes changeWidth{
0% {
width: 300px;
height: 300px;
background-color: yellow;}
50% {
background-color:blue;
}
100% {
width: 600px;
height: 600px;
background-color: red;
border: solid 10px black;}
}
/*animation
animation-name: 원하는이름;
animation-duration: 총 동작 시간;
animation-timing-function: 시간 성격;
animation-delay: 시작 딜레이 시간;
animation-iteration-count: 진행횟수;infinite(무한)
animation-direction: 진행방향;
*애니메이션도 transiton 과 같은 방법으로 한줄로 요약가능하다 순서동일
예시 animation: spinLion 1.5s(duration) linear infinite alternate 0.5s(delay);
*프리픽스 사용시 keyframes에도
@ -프리픽스- keyframes 설정이름{
from { -프리픽스-tansform:; }
to{-프리픽스-tansform:; } }
위와 같이 프리픽스를 사용하고 싶은 곳에 다 적어줘야한다.
*애니메이션 실행시 따라와야하는 코드 -
연동시켜주는 역할, from(0%) 에서 to(100%) 를 적어주어야한다.
@keyframes 설정한 이름 {
from {width: 300px;}
to {width: 600px;}}
*/
.spin-lion {
width: 150px;
height: 150px;
background-color: blue;
animation-name: spinLion;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
/*animation: spinLion 1.5s linear infinite alternate 0.5s;*/
}
@keyframes spinLion {
from{transform: rotate(-10deg);
}
to{transform: rotate(10deg);
}
}
/*참고사이트!stylie
여러가지 스타일들이 어떻게 되어있는지 보고 코드를 가져 올 수 있다.
https://jeremyckahn.github.io/stylie/*/
4.애니메이션 실습
-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- <nav class="mouse-animation">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴</a></li>
</ul>
</nav> -->
<!-- <div class="move-box"></div> -->
<!-- <div class="outer-border">
<div class="inner-border"></div>
</div>
-->
<!--
<div class="mario-countainer">
<div class="mario-coin"></div>
<div class="mario-box"></div>
</div> -->
<!--
<div class="hover-image">
<img src="https://images.template.net/wp-content/uploads/2015/08/Mindblowing-Beach-background-Free-Download.png">
<div class="image-info">
<h2>Title</h2>
<p>Paragraph</p>
</div>
</div> -->
<!-- 참고 사이트!
1.애니메이션 css 라이브러리
https://animate.style/
2.구조 참고!
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css
3.애니메이셔을 검색하면 다른 사람들이 만들어놓은 것 참고 가능
https://codepen.io/ -->
<!-- 역순으로 css 에 이미 class 를 저장해놓고 html에 쓰는 방식 -->
<div class="animate__animated animate__bounce animate__slow color-red">Example</div>
<h2 class="color-red">Hello</h2>
</body>
</html>1) 애니메이션 효과를 준 메뉴 만들기
-css
html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.mouse-animation li {
width: 250px;
background-color: rgba(0, 0, 0, 1);
padding: 20px;
border-top: solid 5px #dfdfdf;
transition: opacity 0.5s, margin-left 0.5s;
}
.mouse-animation li:hover {
background-color: rgba(0 ,0, 0, 0.5);
/*opacity: 0.5; 안에 있는 내용물 전체에 투명도*/
margin-left: 10px;
}
.mouse-animation li a{
color: red;
font-size: 20px;
}
/*y축 정렬
참고 사이트! rgba로 바꿔주는 사이트
http://hex2rgba.devoth.com/
rgba(255, 255, 255, 1(투명도))-전체적인 투명도가아니라 각자 줄 수 있는 장점이있다.*/
2) 박스 움직이기
-css
.move-box {
position: relative; /*top,left,right,bottom사용가능 */
width: 200px;
height: 200px;
background-color: red;
animation-name: moveBox;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/*running 브라우저 접속시 바로 동작
paused 움직이지 않는다.*/
animation-fill-mode: backwards;
/*처음보여지는 화면의 색상이
최초의 박스 색상이 있을지라도, keyframes의 0%에 있는 지정된
모습으로 표현.*/
}
@keyframes moveBox {
0%{
background-color: green;
/*최초박스와 동일하게 색상을 정해야 더 자연스럽다.*/
left: 0;
top: 0;
}
25%{
background-color: yellow;
left: 500px;
top: 0px;
}
50%{
background-color: gray;
left: 500px;
top: 500px;
border-radius: 50%;
}
75%{
background-color: blue;
left: 0;
top: 500px;
}
100%{
background-color: red;
left: 0px;
top: 0;
}
}
3) 도형 안에 또 다른 도형 및 효과주기
-css
.outer-border {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: solid 15px red;
border-radius: 50%;
margin: 0 auto;
margin-top: 200px;
animation: outerBorder 2s infinite ;
}
@keyframes outerBorder {
0% {border-color: red; transform: scale(1);}
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: solid 5px purple;
animation: innerBorder 2s infinite alternate;
}
@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);}
}
/*scale(비율)은 자식 영역 까지 영향을 미침.*/
4) 마리오 동전 효과 주기
-css
.mario-countainer {
position: relative;
width: 500px;
height: 500px;
border: solid 10px black;
margin: 0 auto;
margin-top: 200px;
}
.mario-countainer .mario-coin {
position: relative;
width: 70px;
height: 70px;
background-color: yellow;
border-radius: 50%;
border: solid 1px black;
margin: 0 auto;
margin-top: 100px;
animation: jumpCoin 0.8s linear infinite ;
}
@keyframes jumpCoin {
0% {transform: translateY(0px);
opacity: 1;}
50% { transform: translateY(-100px) rotateY(180deg);
opacity: 0;}
100% { transform: translateY(-100px) rotateY(360deg);
opacity: 0;}
}
.mario-countainer .mario-box {
width: 100px;
height: 100px;
background-color: blue;
margin: 0 auto;
animation: jumpBox 0.5s linear infinite alternate;
}
@keyframes jumpBox {
0% {transform: translateY(0px);}
50% { transform: translateY(-10px);}
100% { transform: translateY(0px);}
}
/* translateY : y 축에만 영향을 미침
{ transform: translateY(-100px) rotateY(180deg);
opacity: 0;} 과 같이 다양한 속성을 함깨 사용 가능하다.
,를 사용하는 것이 아닌
띄어 쓰기로 표시*/
5) 그림 효과 주기, 마우스 올리면 손모양으로 변경되게 하기
-css
.hover-image{
cursor: pointer;
/*마우스를 올릴때 손가락 모양으로 변경*/
overflow: hidden;
/*scale 업 사용시 함께 사용! 특정 영역 벗어났을때 감추는 효과를 적용하기 위해*/
position: relative;
width: 400px;
border: solid 10px #000000;
}
.hover-image img {
width: 100%;
vertical-align: middle;
/*이미지자체는 하단에 조그만 공백이 있는데, 이걸 없애주려 쓰는것,
원래 inline요소의 x축 작업할때 사용하는건데 이미지가 inline-block 성질을 갖고 있어서
사용 할 수 있음- 디폴트값으로 설정 할것*/
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: -85;
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;
}
/*부모 2차원 , 자식 3차원일때 자식의 높이값은 부모의 높이값에 영향을 줄 수없다.
->
부모가 3차원 적인(relative) 특징을 갖고 있다면 자식으로 3차원(absolute)을 적용했을때 width 값의 크기를 부모를
설정으로 적용 시킬 수 있다.
*/
6) css에서 html로 역순으로 지정해보기
-css
.color-red{
color: red;
}
.animate__animated {
margin-top: 200px;
margin-left: 200px;
}
2) 학습내용 중 어려웠던 점 및 해결방법
2차원 3차원 관계, 부모 자식간의 관계에 따른 변화들과 주의점이 너무 어려웠다.
배우면 배울 수록 기억해야할 것이 점점 많아져서 더 복잡하게 얽히는 것 같다.
많이 찾아보고 경험해보는 수 밖에 없을 것 같다.
또 하던 중간에 분명 빠진 것 없이 다 적었고, 이전에 애니메이션 효과 까지 잘 진행이 되었는데
갑자기 안되어 고생을 했다...
이유는 위에서 끝난 코딩의 마지막 부분에 }}가 하나였어야하는데 두개였던것이다.
이렇게 일어나는 문제들을 하나하나 다 찾는게 참 힘든것같다~
3) 학습소감
오늘은 애니메이션이라는 기능으로 만들어보았다. 눈으로만보던 그런 기능들을 내가 직접 만들어보니 참 신기하기도 하고 이렇게 되는거였구나 라는 생각에 재밌기도 하였던 것 같다.
하지만 하면 할 수록 너무 많은 것들이 머릿속에 들어오다보니 정리가 안되는것 같다ㅠ_ㅠ..
그래도 힘내어서 끝까지..뽜이티이!!!!잉!!!!!!!!!!!
아직 여백이 많은 개린이입니다.