HTML CSS3 - 동적 속성

Transition

Transition attribute 는 태그의 크기 등이 바뀔 때 동적으로 바뀌게 해주는 속성이다.

아래의 예로 살펴보자.

1 2 3 4 5

#graph{     width: 610px;     border: 3px solid black; } #graph:hover > .bar { width: 600px;}

cs

transition-duration

1 2 3 4 5 6

.bar {     width: 10px; height: 50px;     background-color: orange;     margin: 5px;     transition-duration: 5s; }

cs

width 가 바뀌면 5s 에 걸쳐서 동적으로 크기가 바뀌게 해준다.

transition-timing-function

1 2 3 4 5

.bar:nth-child(1) { transition-timing-function: linear;} .bar:nth-child(2) { transition-timing-function: ease;} .bar:nth-child(3) { transition-timing-function: ease-in;} .bar:nth-child(4) { transition-timing-function: ease-in-out;} .bar:nth-child(5) { transition-timing-function: ease-out;}

cs

위는 CSS3 가 기본으로 제공하는 수치 변형 함수로

사용자가 함수를 만들 수도 있다.

transition property

1 2 3 4 5 6 7 8 9 10 11 12

.bar {     width: 10px;     height: 50px;     background-color: orange;     margin: 5px;     transition-duration: 1s, 2s;     transition-property: background-color, width; } #graph:hover > .bar:nth-child(1) {     background-color: red;     width: 100px; } Colored by Color Scripter

cs

색도 바꾸고 크기도 바꾸는데 각각의 속성을 조절하기 위해선

위처럼 transition-property 에 지정한 속성의 순서대로

나머지 transition-attribute 를 조정하면 된다.

외에도 다양한 속성이 있다.

한번에

1

transition: background-color 1s ease, width 5s linear 1s;

cs

위처럼 한번에 해도 됨

Animation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

#box {     position: absolute; width: 200px; height: 200px;     border-radius: 100px; text-align: center;     background: linear-gradient(to top, #cb60b3 0%, #db36a4 100%);     animation-name: rint;     animation-duration: 2s;     animation-timing-function: linear;     animation-iteration-count: infinite;     animation-direction: alternate; } #box > h1 { line-height: 200px;} @keyframes rint {     from{         left: 0;         transform: rotate(0deg);     }     50% { left: 500px;}     to{         left: 800px;         transform: rotate(360deg);     } } #box:hover{     animation-play-state: paused; } Colored by Color Scripter

cs

@keyframes 로 animation 를 만들 수 있음.

이걸 위의 animation-~~ 로 설정할 수 있음.

cf. animation-direction 의 alterative 는 실행 후 역순으로 진행된다는 말.

1

animation: rint 2s linear none infinite alternate;

cs

위처럼 한번에 지정도 됨.

Transform

cf. left-top 이 (0, 0) 이고 right-bottom 이 끝점임

1 2 3 4 5 6 7

div {     width: 100px;     height: 100px;     background: Red;     transform: translateX(50px) rotate(60deg) scale(1,2) skewY(10deg);     transform-origin: 100% 100%; /*상대 좌표*/ } Colored by Color Scripter

cs

뭐가 많냐...