1_ 학습한 내용
CSS 애니메이션 속성에 대하여 알아보자 (1:16:30)
트렌스폼(transfotm) : 선택한 오브젝트를 확대하거나 축소하거나 또는 각도를 회전시키거나 위치를 변경
로테이트(rotate) : 2차원적인 회전효과 (평면적으로 회전, 양수를 전달 오른쪽, 음수를 전달 왼쪽)
스케일(scale) : 선택한 영역의 크기를 비율로 키움. (x(width), y(height))
스큐(skew) : 3차원적인 회전효과 (x, y)
트렌스레이트(translate) : 선택한 영역의 오브젝트를 위치를 변경 (x,y)
*트렌스폼 사용시 주의점
익스프로럴 10.0 버전 밑 9.0에도 사용하고싶다
-webkit-(크롬, 사파리) -moz-(파이어폭스) -ms-(익스프로럴) -o-(오페라) 프리픽스가 없는 트렌스폼값을 디폴트값으로 넣는다.
익스프로럴 기준 : -ms- 접두사를 트렌스폼앞에 붙이면 익스프로럴 9.0 포함해서 트렌스폼 적용시키겠다는 내용(하지만 그 이하버전은 적용x)
트렌지션(transition) : 애니메이션이 움직이는 변화하는 과정으 보여주고싶다
듀레이션(duration) : 애니메이션이 진행되는 시간
타이밍포션(timing-function): 애니메이션이 움직이는데 여러속도값을 성격 지정
리니어(linear):처음부터 끝까지 일정한 속도
딜레이(delay): 지정한 속도 이후에 애니메이션 효과를 발동
*transition : 여러개의 속성값을 하나의 속성으로 정리 (transition: width(듀레이션) 2s linear(딜레이) 1s; css의 용량이 줄어 웹사이트를 접속했을 때 로딩속도가 빨라짐)
주의점 : 순서는 상관없으나 단 듀레이션과 딜레이의 대해서만 순서를 신경을써야한다.
애니메이션(animation)
name : 만들고자하는 애니메이션 이름
iteration-count : 애니메이션의 반복횟수
iteration-count: infinite 무한반복
direction : 애니메이션 진행방향
같이 따라와야하는 코드
@keyframes 애니메이션 네임 : 안에는 실제 애니메이션을 발동하는 형태값 입력 ( from, to)
alternate 반복효과
animation : 애니메이션이름 1.5s linear infinite alternate 1s;
index.html
트렌스폼
<.!DOCTYPE html>
<.html>
<.head>
<.meta charset="utf-8">
<.link rel="stylesheet" type="text/css" href="css/style.css">
<./head>
<.body>
<.div class="transform">
<./body>
<./html>
트렌지션
<.!DOCTYPE html>
<.html>
<.head>
<.meta charset="utf-8">
<.link rel="stylesheet" type="text/css" href="css/style.css">
<./head>
<.body>
<.div class="transition"></div.>
<./body>
<./html>
애니메이션 속성
<.!DOCTYPE html>
<.html>
<.head>
<.meta charset="utf-8">
<.link rel="stylesheet" type="text/css" href="css/style.css">
<./head>
<.body>
<.div class="animation"></div.>
<./body>
<./html>
키즈가오 웹사이트 움직임 효과
<.!DOCTYPE html>
<.html>
<.head>
<.meta charset="utf-8">
<.link rel="stylesheet" type="text/css" href="css/style.css">
<./head>
<.body>
<.div class="spin-lion"><./div>
<./body>
<./html>
애니메이션 실습
<.!DOCTYPE html>
<.html>
<.head>
<.meta charset="utf-8">
<.link rel="stylesheet" type="text/css" href="css/style.css">
<./head>
<.body>
<.nav class="mouse-animation">
<.ul>
<.li>메뉴1<./li>
<.li>메뉴2<./li>
<.li>메뉴3<./li>
<.li>메뉴4<./li>
<./ul>
<./nav>
<./body>
<./html>
style.css
트렌스폼
.transform {
width: 300px;
height: 300px;
background-color: yellow;
fransform: rotate(45deg);
margin-left: 300px;
margin-top: 500px;
}
scale{
width: 300px;
height: 300px;
background-color: yellow;
fransform: scale(2, 3);
margin-left: 300px;
margin-top: 500px; }
skew{
width: 300px;
height: 300px;
background-color: yellow;
fransform: skew(10deg, 20deg);
margin-left: 300px;
margin-top: 500px; }
translate{
width: 300px;
height: 300px;
background-color: yellow;
fransform: translate(100px, 300px); }
트레지션
.transition {
width: 300px;
height: 300px;
background-color: yellow;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transiton-delay: 1s;
}
.transition {
transition: width 2s linear, heigth 2s linear;
}
.transition:hover {
width: 600px;
height: 600px;
}
애니메이션
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name: ijustwannagohome
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes ijustwannagohome {
from {
width: 300px;
height: 300px;
background-color: yellow;
}
to {
width: 600px;
height: 600px;
background-color: red;
}
--
숫자
0% {
width: 300px;
height: 300px;
background-color: yellow;
}
50% {
background-color: blue;;
}
100% {
width: 600px;
height: 600px;
background-color: red;
}
키즈가오사이트 움직임효과
1000ms = 1s
.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;
@keyframes spinLion {
from {
transfrom: rotate(-10deg);
}
to {
transfrom: rotate(10deg);
}
한번에 정리+프리픽스
.spin-lion {
width: 150px;
height: 150px;
background-color: blue;
-webkit-animation: spinLion 1.5s linear infinite alternate;
animation: spinLion 1.5s linear infinite alternate;
@-webkit-keyframes spinLion {
from {
-webkit-transfrom: rotate(-10deg);
}
to {
-webkit-transfrom: rotate(10deg);
}
애니메이션실습
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);
margin-left: 10px;
}
.mouse-animation li a {
color: red;
font-size: 20px;
}
2) 학습내용 중 어려웠던 점
애니메이션 속성들이 이렇게 복잡하게 있을 줄은 상상도 못햇어요
3) 해결 방법
아직 이해하지 못한 부분들이 많아서 영상들 보면서 복습하려구요
4) 학습소감
오늘 자소서 쓴다고 시간이 없어서 강의영상을 제대로 못 봤는데 내일은 처음부터 천천히 보려구요
