[css] 로드시 CSS3 전환 애니메이션?

Program / 글쓴이

Javascript를 사용하지 않고 페이지로드시 CSS3 전환 애니메이션을 사용할 수 있습니까?

이것은 내가 원하는 종류이지만 페이지로드시 :

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

내가 지금까지 찾은 것

  • CSS3 transition-delay , 요소에 대한 영향을 지연시키는 방법. 호버에서만 작동합니다.
  • CSS3 Keyframe 은로드시 작동하지만 매우 느립니다. 그 때문에 유용하지 않습니다.
  • CSS3 전환 속도는 빠르지 만 페이지로드시 애니메이션 효과는 없습니다.

답변

JavaScript를 사용하지 않고도 페이지로드시 CSS 애니메이션을 실행할 수 있습니다 . CSS3 키 프레임 만 사용하면 됩니다.

예제를 보자 …

다음은 CSS3 만 사용하여 탐색 메뉴가 제자리로 슬라이딩하는 데모입니다 .

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

스 니펫 확장

그것을 파괴…

여기서 중요한 부분은 우리가 부르는 키 프레임 애니메이션입니다 slideInFromLeft…

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

… 기본적으로 “시작 부분에서 머리글이 화면의 왼쪽 가장자리에서 전체 너비만큼 떨어지고 끝 부분이 제자리에 있습니다”라고 말합니다.

두 번째 부분은 해당 slideInFromLeft애니메이션을 호출하는 것입니다 .

animation: 1s ease-out 0s 1 slideInFromLeft;

위는 속기 버전이지만 명확성을 위해 자세한 버전은 다음과 같습니다.

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

내용을 미끄러지거나 영역에주의를 기울이는 것과 같은 모든 종류의 흥미로운 작업을 수행 할 수 있습니다.

W3C는 다음과 같이 말합니다.

답변

자바 스크립트가 거의 필요하지 않습니다.

window.onload = function() {
    document.body.className += " loaded";
}

이제 CSS :

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

나는 “Javascript없이”라는 질문을 알고 있지만 한 줄의 Javascript를 포함하는 쉬운 솔루션이 있음을 지적 할 가치가 있다고 생각합니다.

인라인 자바 스크립트 일 수도 있습니다.

<body onload="document.body.className += ' loaded';" class="fadein">

이것이 필요한 모든 JavaScript입니다.

답변

페이지의 ‘on.load’로 시작하는 전환 대신 OP 질문에 대한 일종의 해결 방법을 찾았습니다. 불명도 페이드에 애니메이션을 사용하면 동일한 효과가 있음을 발견했습니다. OP와 같은 것).

그래서 페이지로드시 흰색 (사이트 배경과 동일)에서 검은 색으로 본문 텍스트가 페이드 인되도록하고 싶었습니다. 월요일부터 코딩을 했으므로 ‘on.load’스타일 항목 코드를 찾고있었습니다. 그러나 아직 JS를 모릅니다. 그래서 여기 나를 위해 잘 작동하는 코드가 있습니다. 

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

그리고 어떤 이유로 든 이것은 (적어도 내 것은 아닙니다) .class에만 작동하지 않습니다.#id

이 사이트가 저에게 많은 도움이됩니다.

답변

글쎄, 이것은 까다로운 것입니다.

대답은 “실제로는 그렇지 않다”입니다.

CSS는 기능적인 계층이 아닙니다. 어떤 일이 언제 발생하는지 전혀 알지 못합니다. 단순히 다른 “플래그”(클래스, ID, 상태)에 프리젠 테이션 레이어 를 추가하는 데 사용됩니다 .

기본적으로 CSS / DOM은 CSS에서 사용할 “로드시”상태를 제공하지 않습니다. JavaScript를 사용하고 싶거나 사용하려면 bodyCSS를 활성화 할 클래스 또는 클래스를 할당해야합니다 .

즉, 해킹을 만들 수 있습니다. 여기에 예를 들어 설명하지만 상황에 따라 적용되지 않을 수도 있습니다.

우리는 “close”가 “충분히 좋다”는 가정하에 운영하고 있습니다 :

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

다음은 CSS 스타일 시트에서 발췌 한 내용입니다.

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

또한 최신 브라우저는 점진적으로 렌더링되므로 마지막 요소는 마지막으로 렌더링되므로이 CSS는 마지막으로 활성화됩니다.

답변

@Rolf의 솔루션과 유사하지만 외부 함수에 대한 참조 또는 클래스와 함께 연주를 건너 뜁니다. 한 번로드 된 불투명도를 1로 고정하려면 인라인 스크립트를 사용하여 스타일을 통해 불투명도를 직접 변경하면됩니다. 예를 들어

<body class="fadein" onload="this.style.opacity=1">

여기서 CSS sytle “fadein”은 @Rolf마다 정의되어 전환을 정의하고 불투명도를 초기 상태 (예 : 0)로 설정합니다.

유일한 catch는 작동하는 onload 이벤트가 없으므로 SPAN 또는 DIV 요소에서 작동하지 않는다는 것입니다.

답변

마우스를 화면에서 처음 움직일 때 시작됩니다. 도착 후 거의 1 초 이내에 시작됩니다. 여기서 문제는 화면 밖으로 나올 때 반전한다는 것입니다.

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

그게 내가 생각할 수있는 가장 좋은 것 : http://jsfiddle.net/faVLX/

전체 화면 : http://jsfiddle.net/faVLX/embedded/result/

아래의 댓글보기 수정 :
호버가 없기 때문에 터치 스크린 기기에서는 작동하지 않으므로 사용자가 콘텐츠를 탭하지 않으면 콘텐츠가 표시되지 않습니다. – 리치 브래드쇼

답변

3 초 지연된 CSS 만

여기에 몇 가지 사항이 있습니다.

  • 한 번의 호출로 여러 애니메이션
  • 실제 애니메이션을 지연 시키는 대기 애니메이션을 만듭니다 (이 경우 두 번째 애니메이션).

암호:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}