'전체 글'에 해당되는 글 508건

animation-iteration-count: 반복 횟수 ex) 1, 2, infinite;

animation-direction : 애니메이션의 반복방향을 설정

     normar: 정방향

     reverse : 역방향

     alternate : 정방향에서 역방향으로 반복(왕복)

     alternate-reverse: 역방향에서 정방향으로 반복(왕복)

animation-delay : 대기시간 (음수 값도 허용)

.box:hover{
animation: size-up 1s 2 alternate linear 0s;
/* animation-timing-function: linear;
animation-delay; */
}

@keyframes size-up{
0%{ width: 100px;}
100% {width: 500px;}
}

2개 이상의 애니메이션 중간 상태(프레임)을 지정할 때 사용합니다.

/*
@keyframes name{
0%{ 속성 : 값 }
50% { 속성 : 값}
100%{ 속성 : 값}
}
*/

@keyframes moveBox{
0% { left : 100px;}
100% { top: 200px;}
}

.box{
width: 100px;
height: 100px;
background : blue;
}

.box:hover{
animation: myAni 3s infinite alternate;
/*
animation-name: myAni;
animation-duration: .3s;
*/
@keyframes myAni{
0% { width : 100px;
background: yellowgreen;} 
100% { width: 300px;
background: red}
}

.box{

/* 이동 */
transform : translate(x,y);
transform : translateX(x);
transform : translateY(y);
/* 크기, 단위는 배수로만 가능 */
transform : scale(x,y);
transform : scaleX(x);
transform : scaleY(y);
/* 회전 ex) 180deg */
transform : rotate(degree);
/*기울임 ex) 10deg  */
transform : skew(x-deg, y-deg);
transform : skewX(x-deg);
transform : skewY(y-deg);
/* 2차원 변환 효과 */
transform : matrix(n, n, n, n, n, n)
}

음수값을 사용할 수 있으며 음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기 합니다.

div{
text-indent: @@px;
}
//들여쓰기 필요시 사용합니다.
//또한 화면에 나와있는 필요없는 text를 밀어내기위해서도 음수값을 입력함으로써 사용합니다.

div {
text-decoration: none; //아무 줄도 없음
text-decoration: line-through; //글자 중간에 선
text-decoration: underline; //밑줄
text-decoration: overline; //윗줄
}

div {
width : 300px;
height: 300px;
border: 4px solid;
overflow: auto; //넘치는 부분에 스크롤생성
overflow: visible; //넘침
overflow: scroll; // 가로 세로 둘다 스크롤이 생김
overflow: hidden; //넘치는 부분 안보이게 함
}