[HTML/CSS] 📚 transition

📋 기억하고 싶은 내용

• 별도의 Javascript 코드 없이 transition 속성만으로도 다이나믹한 애니메이션 효과를 적용할 수 있다.

📌 transition-property, transition-duration

• 특정 속성에만 transition을 적용하고 싶을 때 transition-property 속성으로 지정하면 된다.
• transition-duration 속성으로 얼마 만큼의 시간 동안 transition을 적용할지 지정할 수 있다.

📌 transition-delay, transition-timing-function

• 여러 개 요소들의 transition-delay 속성 값을 다르게 지정하면 차례대로 transition 되게끔 변경할 수 있다.
• transition-timing-function 속성을 사용해 transition 속도를 다이나믹하게 변경할 수 있다.

📌 transition

transition: margin-left 4s ease-in-out 1s;

• transition 하위 속성들은 transition 단축 속성을 사용해 한줄로 작성하는 것이 일반적이다.
• 앞 쪽의 time 자료형은 duration을 의미하고, 뒤 쪽의 time 자료형은 delay를 의미한다.
• time 자료형 외에는 작성 순서를 지키지 않아도 되지만, transition-property 속성을 제일 먼저 작성하는 것이 좋다.

📌 transition + transform 활용

.box {
	width: 100px;
    height: 100px;
    border: 10px solid green;
    background-color: rab(204, 253, 255);
    border-radius: 30px;
    
    transform-origin: bottom right;
    transition: all 1s ease-in-out;
}

.box:hover {
	transform: rotate(360deg);
}

🔗 참고 래퍼런스

• transition - MDN
• transition-property - MDN
• transitin-duration - MDN
• transition-delay - MDN
• transition-timing-function