[개발일지8일차]css애니메이션효과
1.학습내용
-KidsGao웹사이트에서 오늘 배운 애니메이션 활용 결과 확인 가능
transform
.transform {
width: 300px;
height: 300px;
background-color: yellow;
/*transform: rotate(-10deg);
transform: scale(0.5, 0.5);
(가로, 세로 비율로 크기 설정)
transform: skew(10deg, 20deg);
(x축, y축 각도 조절. 3차원적 회전효과 가능)
transform: translate(100px, 300px);*/
(위치 변경)
/*margin-left: 300px;
margin-top: 500px;*/
/*하위버전 브라우저까지 텍스트 적용가능케
-webkit-transform: rotate(10deg);
크롬,사파리
-moz-transform: rotate(10deg);
파이어폭스
-ms-transform: rotate(10deg);
익스플로어 9.0버전까지
-o-transform: rotate(10deg);
오페라
*/
transform: rotate(10deg);
브라우저에 맞춰 적고난 뒤, default값으로 한 번 더 작성.
}transition
.transition {
width: 300px;
height: 300px;
background-color: yellow;
/*도형 변화 과정을 자연스럽게 보여주고 싶을 때
transition-property: width;
transition-duration: 2s;
300px에서 600px까지 걸리는 시간
transition-timing-function: linear;
애니메이션 속도 성격: 일정 속도 유지
transition-delay: 1s;
마우스 올리고 1초 후에 애니메이션 적용
*/ 한 번에 연달아 작성 가능
transition: width 2s linear, height 2s linear;
}
.transition:hover {
마우스 올렸을 때 변경 값
width: 600px;
height: 600px;
} animation
.animation{
width: 300px;
height: 300px;
background-color: yellow;
animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6;
애니메이션 진행 횟수 (무제한 = infinite)
animation-direction: alternate;
애니메이션 진행 방향
}
@keyframes changeWidth {
에니메이션과 키프레임즈 연동
애니메이션이 발동하는 형태
0%{
시작(=from)
width: 300px;
height: 300px;
background-color: yellow;
}
50%{
(%표시 시, 중간 단계 입력 가능)
background-color: blue;
}
100%{
끝(=to)
width: 600px;
height: 600px;
background-color: red;
border: solid 10px blue;
}
}예)spin-lion
.spin-lion {
width: 150px;
height: 150px;
background-color: blue;
/*animation-name: spinLion;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
*/
animation: spinLion 1.5s linear infinite alternate 1s;
}
@keyframes spinLion {
from {
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}
}https://jeremyckahn.github.io/stylie/ 에서 애니메이션 동선 작성 가능.
.circle {
animation-name: circle-keyframes;
animation-duration: 2000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
.circle {
animation-name: circle-keyframes;
animation-duration: 2000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@keyframes circle-keyframes {
0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
50% {transform:translate(254px, -202px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
100% {transform:translate(381px, 233px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; }
실습
마우스 올렸을 때 애니메이션 변경
<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="#">메뉴4</a></li>
</ul>
</nav>.mouse-animation li {
width: 250px;
/*background-color: #000000;*/
background-color: RGBA(0,0,0,1);
(https://cssgenerator.org/rgba-and-hex-color-generator.html에서 rgba코드 알 수 있다.)
(R, G, B, 투명도)
padding: 20px;
border-top: solid 5px #dfdfdf;
transtion: opacity 0.5s, margin-left 0.5s;
}
.mouse-animation li:hover{
마우스 올렸을때
/*opacity: 0.5;*/
투명도(0~1). 단 글씨도 투명도 적용
background-color: RGBA(0,0,0,0.5);
opacity말고 li태그에 색상을 적용하면서 투명도 적용도 가능. 글씨 적용x
margin-left: 10px;
}
.mouse-animation li a {
color: #ffffff;
font-size: 20px;
}
박스 형태과 색상 애니메이션
<div class="move-box"></div>.move-box {
position: relative;
width: 200px;
height: 200px;
background-color: red;
(#1.도형 상자 기본색 red)
animation: moveBox 4s linear 1s infinite alternate;
animation-play-state: running;
(애니메이션 도형 동작running, 중지pause)
animation-fill-mode: backwards;
(#1.backwards:최초0%에 입력된 색상을 사용자에게 보여주겠다. 즉, green상자를 보여주겠다.)
}
@keyframes moveBox {
0% {
background-color: green;
(#1.애니메이션 시작 상자색 green)
(일반적으로 기본색이랑 같은 색으로 애니메이션 시작)
left: 0;
top: 0;
}
25%{
background-color: yellow;
left: 500px;
top: 0;
}
50%{
background-color: gray;
left: 500px;
top: 500px;
border-radius: 50%;
}
75%{
background-color: blue;
left: 0;
top: 500px;
}
100%{
background-color: red;
left: 0;
top: 0;
}
}도형 크기 변경, 도형 안 도형 변경 애니메이션
<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%;
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: 5px solid purple;
animation: innerBorder 2s infinite;
}
@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: 0px}
100% {border-color: gray; border-width: 5px; transform: rotate(360deg);}
}마리오 동전
<div class="mario-container">
<div class="mario-coin"></div>
<div class="mario-box"></div>
</div>.mario-container {
position: relative;
width: 500px;
height: 500px;
border: solid 10px black;
margin: 0 auto;
(가운데 배치)
margin-top: 200px;
}
.mario-container .mario-coin {
position: relative;
width: 70px;
height: 70px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
border-radius: 50%;
animation: jumpCoin 0.5s linear infinite ;
}
@keyframes jumpCoin{
0%{
transform: translateY(0);
(Y축에만 영향)
opacity: 1;
}
50%{
transform: translateY(-100px) rotateY(180deg);
opacity: 0;
}
100%{
transform: translateY(-100px) rotateY(360deg);
opacity: 0;
}
}
.mario-container .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)}
}
이미지 확대, 설명 등장
<div class="hover-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ06g0ocWysRHcA4vdPpGJMQuYOnvcQcaw9yp81Vqjprv-43PP4OLU1hsRVrUGVW_l41MI&usqp=CAU">
<div class="image-info">
<h2>Title</h2>
<p>Parapgragh</p>
</div>
</div>.hover-image{
cursor: pointer;
(마우스 올렸을 때, 손가락 모양으로 변경)
overflow: hidden;
(공간 벗어나는 이미지 감춰줌)
position: relative;
(#2-2.image info크기 값을 image에 맞춤. 3차원 2차원 부모 자식 관계 개념 유의.)
width: 400px;
border: solid 10px #000000;
}
.hover-image img {
width: 100%;
(hover-image width영향 받음)
vertical-align: middle;
(!!img태그에서는 무조건 default값으로 적기)
(img태그는 태생적으로 하단 공백가짐. 공백 없어질 수 있음)
transtion: transform 1s linear;
}
.hover-image:hover img{
transform: scale(1.3);
}
.hover-image .image-info {
box-sizing: border-box;
(#2-1.padding으르 포함한 title공간을 이미지 크기에 맞춤 적용)
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;
}2.어려운 내용
<오늘은 기억해야 할 내용들>
- prefix사용시 default값도 꼭 작성. css에서도 마찬가지.
- animation-fill-mode: backwards;
- vertical-align: middle;
:img태그에서는 무조건 default값으로 적기
3.해결방법
css작성 값이 많아지면서 오타 더욱 주의하기.
4.학습소감
생각보다 쉬운 작성으로 애니메이션 적용이 되고 있지만, class명 구분에 더욱 주의해야겠다. 작성하면서 헷갈리지 않기 연습 필요.
예비 프론트엔드 개발자