1596321360
애니메이션 - 모양의 변화를 정하는 속성
CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성
@keyframes
- @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다.
- IE는 버전 10 이상에서 사용할 수 있습니다.
문법
@keyframes name {
0% { ... }
n% { ... }
100% { ... }
}
- name : 애니메이션의 이름을 정합니다.
- 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.
- n% : n%일 때의 모양을 정합니다.
- 100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.
예제 1
- 박스가 일정 속도로 커지는 애니메이션입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@keyframes big {
from {
width: 0px;
height: 0px;
}
to {
width: 150px;
height: 150px;
}
}
div#jb {
margin: 30px auto;
background-color: orange;
animation-name: big;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
}
</style>
</head>
<body>
<div id="jb"></div>
</body>
</html>
#css
What is GEEK
Buddha Community
1596321360
애니메이션 - 모양의 변화를 정하는 속성
CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성
@keyframes
- @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다.
- IE는 버전 10 이상에서 사용할 수 있습니다.
문법
@keyframes name {
0% { ... }
n% { ... }
100% { ... }
}
- name : 애니메이션의 이름을 정합니다.
- 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.
- n% : n%일 때의 모양을 정합니다.
- 100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.
예제 1
- 박스가 일정 속도로 커지는 애니메이션입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@keyframes big {
from {
width: 0px;
height: 0px;
}
to {
width: 150px;
height: 150px;
}
}
div#jb {
margin: 30px auto;
background-color: orange;
animation-name: big;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
}
</style>
</head>
<body>
<div id="jb"></div>
</body>
</html>
#css
1596321000
CSS / 애니메이션 - 진행 방향 정하는 속성
CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성
animation-direction
- animation-direction은 애니메이션의 진행 방향 정하는 속성입니다.
- 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다.
문법
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
- normal : 기본값입니다. 정해진 순서로 진행합니다.
- reverse : 반대 순서로 진행합니다.
- alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다.
- alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
- 박스가 커지는 애니메이션입니다.
- animation-direction의 값을 정하지 않거나 normal로 정하면, @keyframes에서 정한 순서로 애니메이션이 진행됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@keyframes big {
from {
width: 0px;
height: 0px;
}
to {
width: 150px;
height: 150px;
}
}
div#jb {
margin: 30px auto;
background-color: orange;
animation-name: big;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: normal;
}
</style>
</head>
<body>
<div id="jb"></div>
</body>
</html>
비디오 플레이어
00:00
00:05
- 값을 reverse로 하면 애니메이션이 반대 방향으로 진행됩니다.
#css
1596328740
CSS / 애니메이션 - 진행 시간 정하는 속성
CSS / 애니메이션 / animation / animation-duration - 진행 시간 정하는 속성
animation-duration
- animation-duration은 애니메이션의 진행 시간을 정하는 속성입니다.
- 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다.
문법
animation-duration: time | initial | inherit
- time : 시간을 정합니다. 기본값은 0입니다. 단위는 s(초) 또는 ms(1000분의 1초)를 사용합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
3초에 걸쳐 박스가 커지는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@keyframes big {
from {
width: 0px;
height: 0px;
}
to {
width: 150px;
height: 150px;
}
}
div#jb {
margin: 30px auto;
background-color: orange;
animation-name: big;
animation-duration: 3000ms;
}
</style>
</head>
<body>
<div id="jb"></div>
</body>
</html>
#css
1596313740
CSS / 애니메이션 / animation
CSS / 애니메이션 / animation
예제
다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다.
코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@keyframes big {
from {
width: 20px;
height: 20px;
}
to {
width: 200px;
height: 200px;
}
}
div#jb {
margin: 30px auto;
width: 20px;
height: 20px;
background-color: orange;
animation-name: big;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: none;
animation-play-state: running;
}
</style>
</head>
<body>
<div id="jb"></div>
</body>
</html>
코드의 의미
@keyframes
- 어떤 모양에서 어떤 모양으로 바꿀지 정합니다.
- 이름은 big으로 지었고, 20px 정사각형에서 200px 정사각형으로 커집니다.
animation-name
- 어떤 @keyframes을 사용할지 정합니다.
- 예제에서는 big을 사용합니다.
#css
1613984554
[Flutter] 화투 카드 뒤집는 애니메이션 만들기
Flutter 는 정말 고급스러운 애니메이션을 어렵지 않은 API 로 사용할 수 있게 해줍니다. 이번 시간에는 AnimatedSwitcher 를 사용해서 화투 카드를 뒤집는 애니메이션을 제작해보도록 하겠습니다.
#flutter #mobile-apps #programming