로드시 CSS3 전환 애니메이션?
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 */
내용을 미끄러지거나 영역에주의를 기울이는 것과 같은 모든 종류의 흥미로운 작업을 수행 할 수 있습니다.
자바 스크립트가 거의 필요하지 않습니다.
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를 포함하는 쉬운 솔루션이 있음을 지적 할 가치가 있다고 생각합니다.
It could even be inline Javascript, something like that:
<body onload="document.body.className += ' loaded';" class="fadein">
That's all the JavaScript that's needed.
I think I have found a sort of work around for the OP question - instead of a transition beginning 'on.load' of the page - I found that using an animation for an opacity fade in had the same effect, (I was looking for the same thing as OP).
So I wanted to have the body text fade in from white(same as site background) to black text colour on page load - and I've only been coding since Monday so I was looking for an 'on.load' style thing code, but don't know JS yet - so here is my code that worked well for me.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
And for whatever reason, this doesn't work for .class only #id's(at least not on mine)
Hope this helps - as I know this site helps me a lot!
Well, this is a tricky one.
The answer is "not really".
CSS isn't a functional layer. It doesn't have any awareness of what happens or when. It's used simply to add a presentational layer to different "flags" (classes, ids, states).
By default, CSS/DOM does not provide any kind of "on load" state for CSS to use. If you wanted/were able to use JavaScript, you'd allocate a class to body or something to activate some CSS.
That being said, you can create a hack for that. I'll give an example here, but it may or may not be applicable to your situation.
We're operating on the assumption that "close" is "good enough":
<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
<!-- A whole bunch of HTML here... -->
<div class="onLoad">OMG, I've loaded !</div>
</body>
</html>
Here's an excerpt of our CSS stylesheet:
.onLoad
{
-webkit-animation:bounceIn 2s;
}
We're also on the assumption that modern browsers render progressively, so our last element will render last, and so this CSS will be activated last.
Similar to @Rolf's solution, but skip reference to external functions or playing with class. If opacity is to remain fixed to 1 once loaded, simply use inline script to directly change opacity via style. For example
<body class="fadein" onload="this.style.opacity=1">
where CSS sytle "fadein" is defined per @Rolf,defining transition and setting opacity to initial state (i.e. 0)
the only catch is that this does not work with SPAN or DIV elements, since they do not have working onload event
start it with hover of body than It will start when the mouse first moves on the screen, which is mostly within a second after arrival, the problem here is that it will reverse when out of the screen.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
thats the best thing I can think of: http://jsfiddle.net/faVLX/
fullscreen: http://jsfiddle.net/faVLX/embedded/result/
Edit see comments below:
This will not work on any touchscreen device because there is no hover, so the user won't see the content unless they tap it. – Rich Bradshaw
Ok I have managed to achieve an animation when the page loads using only css transitions (sort of!):
I have created 2 css style sheets: the first is how I want the html styled before the animation... and the second is how I want the page to look after the animation has been carried out.
I don't fully understand how I have accomplished this but it only works when the two css files (both in the head of my document) are separated by some javascript as follows.
I have tested this with Firefox, safari and opera. Sometimes the animation works, sometimes it skips straight to the second css file and sometimes the page appears to be loading but nothing is displayed (perhaps it is just me?)
<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" />
Here is a link to my work-in-progress website: http://www.hankins-design.co.uk/beta2/test/index.html
Maybe I'm wrong but I thought browsers that do not support css transitions should not have any issues as they should skip straight to the second css file without delay or duration.
I am interested to know views on how search engine friendly this method is. With my black hat on I suppose I could fill a page with keywords and apply a 9999s delay on its opacity.
I would be interested to know how search engines deal with the transition-delay attribute and whether, using the method above, they would even see the links and information on the page.
More importantly I would really like to know why this is not consistent each time the page loads and how I can rectify this!
I hope this can generate some views and opinions if nothing else!
If anyone else had problems doing two transitions at once, here's what I did. I needed text to come from top to bottom on page load.
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;
}
Don't know why I kept trying to use 2 transition declarations in 1 selector and (not really) thinking it would use both.
Not really, as CSS is applied as soon as possible, but the elements might not be drawn yet. You could guess a delay of 1 or 2 seconds, but this won't look right for most people, depending on the speed of their internet.
In addition, if you want to fade something in for instance, it would require CSS that hides the content to be delivered. If the user doesn't have CSS3 transitions then they would never see it.
I'd recommend using jQuery (for ease of use + you may wish to add animation for other UAs) and some JS like this:
$(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.
});
Along with the transitions added in the CSS. This has the advantage of easily allowing the use of animate instead of the second CSS in legacy browsers if required.
참고URL : https://stackoverflow.com/questions/6805482/css3-transition-animation-on-load
'Programing' 카테고리의 다른 글
| 최대 또는 기본? (0) | 2020.05.26 |
|---|---|
| Openssl은 내부 또는 외부 명령으로 인식되지 않습니다 (0) | 2020.05.26 |
| DataTable을 일반 목록으로 어떻게 변환합니까? (0) | 2020.05.26 |
| 강력한 형식의 부분 뷰에 추가 ViewData 전달 (0) | 2020.05.26 |
| iframe에서 상위 URL에 액세스 (0) | 2020.05.26 |