CSS3 전환 애니메이션 로드 중?
Javascript를 사용하지 않고 CSS3 전환 애니메이션을 페이지 로드에서 사용할 수 있습니까?
이것은 제가 원하는 것과 같습니다. 하지만 페이지 로드:
지금까지 발견한 것
- 요소에 대한 효과를 지연시키는 방법인 CSS3 전환 지연.호버에서만 작동합니다.
- CSS3 키프레임, 로드에서는 작동하지만 매우 느립니다.그것 때문에 유용하지 않습니다.
- CSS3 전환은 충분히 빠르지만 페이지 로드 시 애니메이션을 수행하지 않습니다.
자바스크립트를 사용하지 않고 페이지 로드에서 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 */
여러분은 콘텐츠에서 미끄러지거나 영역에 관심을 끄는 것과 같은 모든 종류의 흥미로운 것들을 할 수 있습니다.
Javascript는 거의 필요하지 않습니다.
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일 수도 있습니다.
<body onload="document.body.className += ' loaded';" class="fadein">
필요한 것은 자바스크립트뿐입니다.
페이지의 'on.load'로 시작하는 전환 대신 OP 질문에 대한 일종의 해결책을 찾은 것 같습니다. 불투명 페이드인에 애니메이션을 사용하는 것도 OP와 같은 효과를 낸다는 것을 알게 되었습니다.
그래서 저는 페이지 로드 시 본문 텍스트를 흰색(사이트 배경과 동일)에서 검은색 텍스트 색상으로 페이드인하고 싶었습니다. 그리고 월요일부터 코딩만 했기 때문에 'on.load' 스타일의 코드를 찾고 있었지만, 아직 JS를 모릅니다. 그래서 여기 저에게 잘 맞는 제 코드가 있습니다.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
로든, 그고어이든로유이은것떤, 리은▁for▁and에 효과가 ..class 직오의#id의 (내 은 아님)' (적어도내것아은님의아적))
이것이 도움이 되길 바랍니다 - 제가 아는 이 사이트는 저에게 많은 도움이 됩니다!
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; }
}
음, 이건 까다롭군요.
답은 "그렇지 않다"입니다.
CSS는 기능 계층이 아닙니다.그것은 무슨 일이 일어나고 언제 일어나는지에 대한 인식이 없습니다.다른 "플래그"(클래스, ID, 상태)에 프레젠테이션 계층을 추가하는 데만 사용됩니다.
기본적으로 CSS/DOM은 CSS가 사용할 "부하 시" 상태를 제공하지 않습니다.당신이 자바스크립트를 할 수 있었다면,은 자바스크립트에 입니다.bodyCSS를 활성화할 수도 있습니다.
말하자면, 당신은 그것을 위한 해킹을 만들 수 있습니다.여기서 예를 들겠습니다만, 귀하의 상황에 해당될 수도 있고 그렇지 않을 수도 있습니다.
우리는 "닫기"가 "충분히 좋다"는 가정 하에 운영되고 있습니다.
<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가 마지막으로 활성화될 것이라고 가정합니다.
훨씬 더 간단한 솔루션([한 줄 인라인] javascript를 여전히 사용):
본문 태그로 사용:참고:body.또는this.저한테는 안 통했어요.것만; 긴만것;;querySelector의 사용을 허용합니다.classList.removeCromium)(Linux 파일)
<body class="onload" onload="document.querySelector('body').classList.remove('onload')">
다른 CSS 규칙 위에 이 줄을 추가합니다.
body.onload *{ transform: none !important; }
이는 불투명도를 전환 트리거로 사용하는 것만으로 (OP[다른 포스터]의 요청에 따라) 불투명도에 적용될 수 있습니다.(다른 CSS 규칙도 동일한 방식으로 작업할 수 있으며 트리거링 간의 명시적 지연을 위해 여러 클래스를 사용할 수 있습니다.)
논리는 같습니다.안 함( 변환안사함용(사) 사용):none !important 어이요소에린의 모든 에.body.onload그리고 문서가 로드되면 클래스를 제거하여 CSS에 지정된 모든 요소에서 모든 전환을 트리거합니다.
아래 첫 번째 답변(단순 답변은 위의 편집 참조)
다음은 역방향 솔루션입니다.
- HTML 레이아웃을 만들고 최종 결과(원하는 모든 변환 포함)에 따라 CSS를 설정합니다.
- 원하는 대로 전환 속성 설정
- 로드 후 변환할 요소에 클래스(예: waitload)를 추가합니다.CSS 키워드!important는 여기서 핵심 단어입니다.
- 문서가 로드되면 JS를 사용하여 변환을 시작할 요소에서 클래스를 제거하고 변환을 제거합니다. 재정의하지 않습니다.
여러 요소에서 여러 전환 작업을 수행합니다.브라우저 간 호환성을 시도하지 않았습니다.
div {
width: fit-content;
}
#rotated {
transform: rotate(-50deg)/* any other transformation */
;
transition: 6s;
}
#translated {
transform: translate(90px)/* any other transformation */
;
transition: 6s;
}
.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">
document.addEventListener('DOMContentLoaded', init);
function init() {
[...document.querySelectorAll('.waitload')]
.map(e => e.classList.remove('waitload'));
}
</script>애니메이션에서 페이드를 위해 이것을 당신의 CSS에 추가합니다.
body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
로드 속도를 늦추려면 완화 시간을 늘립니다.
@Rolf의 솔루션과 유사하지만 외부 함수나 클래스를 사용하여 재생하는 것에 대한 참조를 건너뜁니다.로드된 후 불투명도를 1로 고정하려면 인라인 스크립트를 사용하여 스타일을 통해 불투명도를 직접 변경하기만 하면 됩니다.예를들면
<body class="fadein" onload="this.style.opacity=1">
여기서 CSS syle "fadein"은 @Rolf에 따라 정의되며, 전이를 정의하고 불투명도를 초기 상태(즉, 0)로 설정합니다.
유일한 단점은 SPAN 또는 DIV 요소가 로드 이벤트에서 작동하지 않기 때문에 이 요소가 작동하지 않는다는 것입니다.
마우스가 화면에서 처음 움직일 때 시작되는데, 도착 후 1초 이내에 마우스가 화면에서 처음 움직일 때 문제는 화면 밖으로 나가면 반대로 된다는 것입니다.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
그것이 제가 생각할 수 있는 가장 좋은 것입니다: http://jsfiddle.net/faVLX/
전체 화면: http://jsfiddle.net/faVLX/embedded/result/
아래 설명을 참조하십시오.
호버가 하지 않을 이고, 수 없을 – Rich 버호가장치작않는에서사크으동므용하로터자가누치스지린다없수볼않내크린을니르지면습용을으이능이스기치터에문기때없▁–▁rich▁this▁brad▁unlessshaw▁content▁because▁–screen다호없,수▁rich▁there - Rich Bradshaw니볼▁device습내▁will누않▁it을스▁won.
좋아요. CSS 전환만 사용하여 페이지를 로드할 때 애니메이션을 얻을 수 있었습니다.
나는 2개의 CSS 스타일 시트를 만들었습니다: 첫 번째는 애니메이션 전에 html 스타일을 원하는 방법입니다...그리고 두 번째는 애니메이션이 수행된 후 페이지가 어떻게 보이도록 하는 것입니다.
제가 어떻게 이 일을 해냈는지 완전히 이해할 수는 없지만 두 개의 css 파일(둘 다 제 문서 머리에 있음)이 다음과 같이 자바스크립트로 분리되어 있을 때만 작동합니다.
파이어폭스, 사파리, 오페라로 테스트해봤습니다.애니메이션이 작동할 때도 있고, 두 번째 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 파일로 바로 건너뛰어야 하므로 문제가 없어야 한다고 생각했습니다.
저는 이 방법이 얼마나 검색 엔진에 친숙한지에 대한 견해를 알고 싶습니다.검은 모자를 쓰고 있으면 페이지를 키워드로 채우고 불투명도에 9999s 지연을 적용할 수 있을 것 같습니다.
저는 검색 엔진이 전환 지연 속성을 어떻게 처리하는지, 그리고 위의 방법을 사용하여 페이지에서 링크와 정보를 볼 수 있는지 알고 싶습니다.
더 중요한 것은 페이지가 로드될 때마다 이 문제가 일관되지 않는 이유와 이 문제를 해결할 수 있는 방법을 알고 싶습니다!
저는 이것이 다른 것이 아니라면 어떤 견해와 의견을 만들어 낼 수 있기를 바랍니다!
다른 사람들이 두 번의 전환을 동시에 수행하는 데 문제가 있다면, 제가 한 일은 이렇습니다.페이지 로드 시 위에서 아래로 이동할 수 있는 텍스트가 필요했습니다.
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;
}
왜 제가 한 셀렉터에서 두 개의 전환 선언을 계속 사용하려고 했는지 모르겠습니다. (사실은 아니지만) 둘 다 사용할 것이라고 생각했습니다.
css 태그 대신 사용자 지정 css 클래스(className)를 사용할 수도 있습니다.외부 패키지가 필요하지 않습니다.
import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'
const Hello = (props) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
// For load
setTimeout(function () {
setLoaded(true);
}, 50); // Browser needs some time to change to unload state/style
// For unload
return () => {
setLoaded(false);
};
}, [props.someTrigger]); // Set your trigger
return (
<div
css={[
css`
opacity: 0;
transition: opacity 0s;
`,
loaded &&
css`
transition: opacity 2s;
opacity: 1;
`,
]}
>
hello
</div>
);
};
그렇지는 않습니다, 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 대신 애니메이션을 쉽게 사용할 수 있는 장점이 있습니다.
언급URL : https://stackoverflow.com/questions/6805482/css3-transition-animation-on-load
'source' 카테고리의 다른 글
| MySQL 데이터베이스를 선택 취소하는 방법은 무엇입니까? (0) | 2023.08.20 |
|---|---|
| Excel: 열/행/행렬 간의 데이터 변환 공식 (0) | 2023.08.20 |
| 다른 사용자로 오라클 저장 프로시저 실행 (0) | 2023.08.20 |
| 테스트 디렉토리를 적용 범위에서 제외할 수 있습니까?py 보고서? (0) | 2023.08.20 |
| Spring WebServiceTemplate에서 시간 초과를 설정하는 방법 (0) | 2023.08.20 |