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

196

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

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

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

내가 지금까지 찾은 것

  • CSS3 transition-delay , 요소에 대한 영향을 지연시키는 방법. 호버에서만 작동합니다.
  • CSS3 Keyframe 은로드시 작동하지만 매우 느립니다. 그 때문에 유용하지 않습니다.
  • CSS3 전환 속도는 빠르지 만 페이지로드시 애니메이션 효과는 없습니다.
css  webkit  css-transitions  css-animations 
— 젠스 토넬
소스
— NickFitz
2
CSS3 애니메이션이 지원되지 않으면 키 프레임이이를 수행하고 최상의 대체를 제공합니다. 왜 그들이 너무 느리다고 생각합니까?
— zachleat
안녕하세요! 이제 링크가 끊어졌고 어디로 가야할지 모르겠습니다. 누군가 고칠 수 있습니다.
— Linux4Life531

답변:

460

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는 다음과 같이 말합니다.

— 크리스 스피 틀즈
소스
20
이전이 아닌 페이지를로드 할 때 무엇이 ​​실행됩니까?
— Rolf
2
위의 질문에 대답하기 위해 기본적으로 애니메이션이 적용된 후 지연없이 0 초부터 시작됩니다. 이를 제어하도록 설정할 수있는 추가 애니메이션 지연 속성이 있습니다. 참조 : w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis
2
문서가로드 된 후 애니메이션이 시작되도록하려면 본문 요소 아래의 스타일 시트 또는 본문 요소 아래쪽의 스타일 태그에 애니메이션 코드를 배치하십시오.
— TaylorMac
내 지식으로 @SuzanneEdelmanCreoconcept, IE9는 전환 속성을 지원하지 않습니다. 선택 사항은 JS 또는 우아한 성능 저하입니다.
— Chris Spittles
1
훌륭한 답변, 2019 년에 도움이되었습니다!
— Gosi
28

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

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입니다.

— 롤프
소스
2
약간의 수정 : <body onload = "document.body.setAttribute ( 'class', 'loaded')">
— Ivan
1
페이지 onLoad 이벤트를 기다릴 필요가없는 경우 </ body> 태그 앞에이 코드를 삽입하십시오. <script type = "text / javascript"> document.body.setAttribute ( 'class', 'loaded'); </ script>
— Ivan
7
기존 body클래스 의 재정의를 피하려면 다음을 사용하십시오.document.body.classList.add('loaded)
— Vyacheslav Cotruta
1
기존 클래스에 클래스를 추가 하는 데 document.body.className += " loaded";약간 덜 장황한 것으로 나타났습니다 . loaded
— Pim Schaaf
1
@PimSchaaf 제안 해 주셔서 감사합니다. 지금 편집하겠습니다. 요즘에는 좀 더 우아하지만 호환성이 떨어지는 classList를 사용할 수도 있습니다.
— Rolf
21

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

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

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

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

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

— 이 존
소스
6

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

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

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는 마지막으로 활성화됩니다.

— 여우 같은
소스
1

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

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

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

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

— 사용자 3907296
소스
1

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

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

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

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

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

— 수염
소스
예, 나는 그것을 스스로 알아 냈습니다. 아무것도 작동하지 않으면 괜찮은 해결 방법입니다. 그것에 대한 하나의 투표.
— Jens Törnell
13
터치 스크린 기기에는 호버링이 없으므로 사용자가 콘텐츠를 탭하지 않으면 내용을 볼 수 없습니다.
— Rich Bradshaw
1

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; }
}
— 클라우 디우
소스
0

Ok CSS 전환 만 사용하여 페이지를로드 할 때 애니메이션을 만들었습니다 (정렬!).

CSS 스타일 시트를 2 개 만들었습니다. 첫 번째는 애니메이션 전에 HTML 스타일을 지정하는 방법입니다 ... 두 번째는 애니메이션이 수행 된 후 페이지를 보는 방법입니다.

나는 이것을 어떻게 달성했는지 완전히 이해하지 못하지만 두 CSS 파일 (내 문서의 머리 부분 모두)이 다음과 같이 일부 자바 스크립트로 분리 된 경우에만 작동합니다.

Firefox, safari 및 opera로 이것을 테스트했습니다. 때로는 애니메이션이 작동하고 때로는 두 번째 CSS 파일로 바로 건너 뛰고 때로는 페이지가로드되는 것처럼 보이지만 아무것도 표시되지 않습니다 (아마도 나입니까?)

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

진행중인 작업 웹 사이트에 대한 링크는 다음과 같습니다. http://www.hankins-design.co.uk/beta2/test/index.html

어쩌면 틀렸지 만 CSS 전환을 지원하지 않는 브라우저는 지연이나 지속 시간없이 두 번째 CSS 파일로 바로 건너 뛰어야하므로 문제가 없어야한다고 생각했습니다.

이 방법이 검색 엔진에 얼마나 친숙한 지에 대한 의견을 알고 싶습니다. 검은 모자를 쓰고 키워드로 페이지를 채우고 불투명도에 9999 초 지연을 적용 할 수 있다고 가정합니다.

검색 엔진이 전환 지연 속성을 처리하는 방법과 위의 방법을 사용하여 페이지의 링크와 정보를 볼 수 있는지 알고 싶습니다.

더 중요한 것은 페이지가로드 될 때마다 이것이 일관성이없는 이유와이를 수정할 수있는 방법을 알고 싶습니다!

이것이 없으면 다른 견해와 의견을 얻을 수 있기를 바랍니다.

— 마이클 워킹
소스
0

다른 사람이 한 번에 두 번의 전환을 수행하는 데 문제가있는 경우 여기에 내가 한 일이 있습니다. 페이지로드시 텍스트를 위에서 아래로 가져와야했습니다.

HTML 

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS 

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

왜 1 선택기에서 2 개의 전환 선언을 계속 사용하려고했는지 모르겠지만 (실제로) 둘 다 사용할 것이라고 생각했습니다.

— s3c
소스
0

더 간단한 솔루션도 (여전히 [한 줄 인라인] 자바 스크립트로) :

body 태그로 이것을 사용하는 것으로 body.나 this.나를 위해 작동하지 않았다. 오직 긴; (Linux Chromium) querySelector사용 허용classList.remove

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

다른 CSS 규칙 위에이 줄을 추가하십시오.

body.onload *{ transform: none !important; }

불투명도 대신 전환 트리거로 사용하여 불투명도 (OP [other posters]에서 요청한대로)에 적용 할 수 있습니다. (같은 방식으로 다른 CSS 판결에서도 작동 할 수 있으며 트리거링 사이의 명시 적 지연을 위해 다중 클래스를 사용할 수 있습니다)

논리는 동일합니다. 변환을 적용하지 마십시오 (문서 :none !important의 모든 하위 요소에 적용 body.onload되고 일단 문서가로드되면 클래스를 제거하여 CSS에 지정된 모든 요소에 대한 모든 전환을 트리거하십시오.

첫 번째 답변 아래 (쇼터 답변 편집 참조)

반대의 해결책은 다음과 같습니다.

  1. html 레이아웃을 만들고 최종 결과에 따라 CSS를 설정하십시오 (원하는 모든 변환 포함).
  2. 전환 속성을 원하는대로 설정
  3. 로드 후 변환하려는 요소에 클래스 (예 : 대기로드)를 추가하십시오. CSS 키워드 ! important 가 핵심 키워드 입니다 .
  4. 문서가로드되면 JS를 사용하여 요소에서 클래스를 제거하여 변환을 시작하십시오 (및 트랜지션 제거 : 대체 없음).

여러 요소에서 여러 전환으로 작동합니다. 브라우저 간 호환성을 시도하지 않았습니다.

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}
<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>
— 루이스 루독 트로 티에
소스
-2

실제로 CSS가 가능한 빨리 적용되는 것은 아니지만 요소가 아직 그려지지 않을 수 있습니다. 1-2 초의 지연을 추측 할 수 있지만 인터넷 속도에 따라 대부분의 사람들에게 적합하지 않습니다.

또한, 예를 들어 무언가를 희미하게하려면 내용을 숨기는 CSS가 필요합니다. 사용자에게 CSS3 전환이없는 경우 해당 전환이 표시되지 않습니다.

jQuery (사용 편의성을 위해 + 다른 UA 용 애니메이션을 추가 할 수 있음)와 다음과 같은 JS를 사용하는 것이 좋습니다. 

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

CSS에 추가 된 전환과 함께. 필요한 경우 레거시 브라우저에서 두 번째 CSS 대신 애니메이션을 쉽게 사용할 수 있다는 이점이 있습니다.

— 리치 브래드쇼
소스
17
이 답변이 왜 수락 되었습니까? 실제로 질문이 요구하는 것은 아닙니다. 그것은 단순히 (그리고 때로는 눈에 띄지 않게) 요소를 보이지 않게 시작하고 1 초 (200 ms)의 작은 부분을 기다린 다음 즉시 다시 볼 수있게합니다. 마지막으로 확인한 것은 퇴색이 아닙니다.
— VoidKing
에 #id_to_fade in동의하지만 CSS 대답을 명확하게 알 수는 없습니다.
— Rich Bradshaw
에서와 같이 다른 .css ({transition : 'opacity 2s'})를 jQuery 호출에 추가 하시겠습니까? 아니면 그냥 CSS에서? 나는 이것이 멍청한 질문 인 것 같은 느낌이들 것입니다 ...
— VoidKing
3
괜찮습니다 – 데모를 실제로 뒀어 야 했어요. CSS에서 #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-도 -moz-접두사입니다.
— Rich Bradshaw
2
키 프레임을 사용하는 것이 좋은 방법입니다.
— Eduardo Naveda
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.