페이지 열었을 때 css transition

해당 기능은 CSS Transitions 모듈 Level 2에서 개발 중이며 이름은 "@starting-style" 입니다 크롬 및 엣지는 지원하지만 사파리는 experimental이며 파이어폭스는 미구현 상태입니다 예시) ----- .box { transition: background-color 2s; background-color: lime; } @starting-style { .box { background-color: blue; } } ----- 위와 같이 작성하면 웹페이지가 로딩되었을 때 초기 컬러인 blue에서 lime으로 2초간 변화된 후에 lime 컬러를 유지합니다 브라우저 지원현황 : https://caniuse.com/mdn-css_at-rules_starting-style 명세 : https://www.w3.org/TR/css-transitions-2/#defining-before-change-style 대안으로 CSS animation 속성 중 "animation-fill-mode: forwards;" 를 주면 비슷한 효과를 낼 수 있습니다

CSS transition을 페이지 로드 시 적용하기 위해서는 일반적으로 JavaScript를 사용해야 합니다. 'window.onload' 이벤트가 가장 흔히 사용되는 방법입니다. 하지만, 이 외에도 몇 가지 다른 방법이 있습니다: 1. CSS 애니메이션: CSS animation을 사용하면 JavaScript 없이 페이지 로드 시에도 애니메이션을 시작할 수 있습니다. '@keyframes'를 사용하여 애니메이션의 시작과 끝을 정의하고, 이를 요소에 적용하여 애니메이션을 만듭니다. 다만, 이 방법은 애니메이션의 시작과 끝만 제어할 수 있으며, 중간의 상태를 제어하는 것은 어렵습니다. 2. CSS transition과 JavaScript 조합: 'window.onload' 대신 'setTimeout'을 사용하여 약간의 딜레이를 준 후에 CSS 클래스를 추가하는 방법이 있습니다. 이 방법은 페이지 로드 시의 렌더링이 완료된 후에 애니메이션을 시작할 수 있습니다. 3. CSS ':target 선택자': CSS의 ':target' 선택자를 사용하면 URL의 해시(#)가 변경될 때 스타일을 변경할 수 있습니다. 이를 이용하여 페이지 로드 시 특정 요소에 애니메이션을 적용할 수 있습니다. 하지만, 이 방법은 URL의 해시를 사용해야 하므로 다른 용도로 해시를 사용하고 있다면 적용하기 어렵습니다. 각 방법은 그 자체로 한계가 있으므로, 상황에 맞게 적절한 방법을 선택하는 것이 중요합니다.

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
29
30
31
#1
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.my-element {
  animation: fadeIn 1s ease-in-out;
}


#2
window.setTimeout(function() {
  document.querySelector('.my-element').classList.add('start-transition');
}, 0);

.my-element {
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.my-element.start-transition {
  opacity: 1;
}


#3
.my-element:target {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}