단일 애니메이션

단일애니메이션 - 한번만 동작
transition:all	또는 개별속성명 1s [지연시간] [ease]
ease	처음과 끝이 느리고 중간이 빠름, 주로사용
ease-in(가속)	처음은 느리고 끝에서 빨라짐
ex. 우주선이 밖으로 나갈때	- ease-out(감속): 처음은 빠르고 끝에서 느려짐
ex. 화면밖에서 안으로 들어올때	- ease-in-out: ease와 같지만 중간속도가 ease보다 부드러움
ex. 반복애니메이션에 사용	- steps(5)
ex. 타이핑 애니메이션에 사용	- cubic-bezier(1,0,0,1) /* easeInOutExpo*/
ex. 특수한 움직임 (스프링, 다이나믹한움직임)이 필요한 경우 사용 크롬개발자모드로 커스텀, https://easings.co/ 이용	- linear(등속도): 속도변화가 없이 일정함

* 데스크탑은 고정크기이므로 all사용해도되며
모바일, 반응형은 all사용시 크기도 애니메이션이 되버리므로 개별속성 사용하자
* :hover를 움직이는 요소에 걸지말것
* background-color로 사용
* transition은 처음에 미리 걸어야하며 :hover에 걸경우 :hover에서만 애니메이션이됨
* 처음 transition과 :hover의 transition을 다르게 세팅가능

 

transform - 이동,크기,회전,기울이기로 변화를 줌
position:relative처럼 원래위치는 막히면서 제자리에서 뜨게됨
rotateZ(-90deg)	회전, 음수는 반시계방향, 여러바퀴회전은 각도를 많이주면됨
rotateY	플립효과(카드플립효과)
translate(x, y)	% 사용시 자신의 크기가 기준이며 음수가능
translateX(100px) translateY(100px)	가로나 세로 한방향일 경우 사용
transform-origin	transform기준점 변경가능 px, %, left, top 사용하여 변경
scale(1.5)	가로,세로 크기를 배수로 변경
skewX(45deg)	기울이기

 

- css 애니메이션은 GPU가속방식을 사용하므로 성능이 우수함
***** positon:fixed요소 바깥쪽 요소에 transform사용시 fixed요소의 기준이 transform사용한 요소로 변경됨(크롬버그)
***** fixed 바깥요소에 transform사용불가!!!!!
***** head에 연결된 js파일이 하나도 없을경우 transition자동시작 버그(크롬버그) 발생함 (2022.09.26일 수정된걸로 보임)

 

 

 

 

 

---

예제

 

 

박스 이동시키기

.main_section01:hover .box {
    transform: translateX(500px);
}

박스 클릭시 색 이동

/* 요소이동시 부모에 hover */

 

---

 

 

/* translate의 %는 요소의 크기가 기준 */

.main_section01:hover .box {
    transform: translateX(100%);
}

 

 

 

 

/* transfrom은 position:relative 처럼 원래위치를 막아주며 제자리에서 뜸 */

.main_section01:hover .box {
    transform: translate(100px, 30px);
}

transform에 z-index 안됨

 

 

 

 

 

/* transform:translate 은 GPU 가속을 사용하므로 좀더 부드러움 */

다른것보다 권장!

 

.main_section02:hover .box{

    /* left: calc(100% - 100px); */

    margin-left: 1100px;

 

둘다 사용가는하나 비권장

 

 

회전시키기도 가능 

 

 

    /* transform: rotateX(360deg); */

    /* transform: rotateY(360deg); */

    /* transform: rotateZ(180deg); */

    /* 음수면 반시계방향 */

    /* transform: rotateZ(-180deg) translate(400px) skew(45deg); */

    transform: scale(2.5) rotateZ(-180deg) skew(45deg);

 

 

 

 

.main_section04 .box {

    transition: all 3s ease;

}

.main_section04:hover .box {

    transform: translate(1100px);

}

 

크롬에서 그래프로 확인가능

천천히 시작해서 빨리 갔따가 천천히들어오기

 

/* transition:all 또는 속성명 시간[ease] */

/* linear은 등속도 */

/* ease는 기본값 (일반적) */

/* ease-in 가속도 (거의안씀)*/

/* ease-out 감속 (거의안씀)*/

/* cubic-bezier 특수한 움직임 */

.main_section04 .box {

    transition: all 3s ease linear;

}

 

양쪽으로 적용가능 

    transition: all 1s; 

 

hover에

    transition: all 4s;

 

갈때는 4초로 올때는 1초로 2번적용가능  

 

 

 

 

 

 

 

/* cubic-bezier 특수한 움직임 */  스프링같은 효과 

    transition: all 1s 1s cubic-bezier(0.88,-0.2, 0.14, 1.24); 

속성명 /시간 /지연시간/스프링효과

 

 

쉽게 속도 넣을수 있는 관련 싸이트 참고

 

https://easings.co/

Easings - Generate, test and share custom easing curves.

 

 

 

 

    transition: all 1s steps(10);

뚝뚝 끊어서 스텝으로 가는것 (스텝의 숫자 ) 

타이포 같은 텍스트 애니메이션에씀

.main_section04 P {
    border: 1px solid black;
    font-size: 50px;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 2s steps(10);
}
.main_section04 P:hover {
    width: 500px;
}

주의 글씨를 가려준 상태에서 한스텝시 모여줘야할때 

display: none; 은 적용안됨 

hover에

    /* overflow: hidden; */ 이나 

    visibility: hidden;

 

    visibility: hidden; /  visibility: visible;

    opacity: 1; 

요소 가능

 

 

 

/* 클릭요소가 겹쳐있을때 페이드효과 사용시

opacity: 0;    visibility: hidden; 과 같이 사용해야함 */

.main_section05 .lang_wrap .lang {

    position: absolute;

    left: 0px;

    top: 30px;

    width: 100%;

    background: yellow;

    opacity: 0;

    visibility: hidden;

    transform: all 1s;

}

.main_section05 .lang_wrap:hover .lang {

    opacity: 1;

    visibility: visible;

}

.main_section05 .lang_wrap .lang a {

    display: block;

}

.main_section05  p {

    clear: both;

    font-size: 30px;

}