I am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.
Related
I have one issue regarding overlay technique in CSS. I use :target element to display a div which have initially width:0 and height:0. But this new div disappear once I put my mouse out of the browser window.
You can check my code on that page, click on a thumbnail and move your mouse outside the browser window and see what happen:
http://wang-chang.com/test/photos/galerie-photos.html?aid=355194617939727
If anyone get any idea, it will be very appreciate :)
Thanks in advance.
which div are you talking about? the one with id mask?
you are only changing the opacity in hover
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
found in
http://wang-chang.com/test/photos/css/style6.css
so when you move the mouse out, the opacity returns back to 0.
http://jsfiddle.net/cJrgB/
The hyperlinks in #shortcut-bar are given -webkit-transition: background .25s ease-in-out. But it doesn't work. I also tried with all .25s ease-in-out
The lines of code corresponding to my problem are under:
/* vvvvvvvvvvvvvvvvvvvvv here vvvvvvvvvvvvvvvvvvvvv */
PS: Please explain to me what ease-in-out ease-in ease-out ease etc mean
PS2: Also, which place is beter for transition property, in :hover pseudo-class or in its general area, the one without :hover
Ad main question: I think transition doesn't work with gradients.
Ad PS: see CSS3 Transitions
Ad PSS: if you add trasition to :hover it will only be active on :hover, so when you 'unhover', there will be no transition at all.
I am not quite sure how to use CSS3 transitions to do what I want. I'm new to using them so I could really use some help :)
Here is the JSFiddle with what I'm working on.
So, basically the div.portlet is supposed to be a window showing what is in the explode. WHen you click on the portlet, I want it to grow to fill up the div.container. And when you close I want it to shrink back to its normal size.
fade isnt transact property either you need to definde like fadeIn defined below you can do this by
as in your comment
try
div.portlet
{
transition: ease-out 2s;
-moz-transition: ease-out 2s; /* Firefox 4 */
-webkit-transition: ease-out 2s; /* Safari and Chrome */
-o-transition: ease-out 2s; /* Opera */
}
and add z-index:3; to div.portlet and z-index:4 to class open
and jquery
$(".container").on("click", ".portlet", function(){
$(".portlet").css("z-index","3");
$(this).addClass("open");
$(this).css("z-index","333");
});
});
I am very close to what I want to do but still some problems.
All I want is #sca to come from outside of the div and stays there all the time until page closes and I want this to happen with transition effect very smooth. I also want it to happen without an :focus, :hover, :active events, I want it to happen 2seconds after page opens.
if anybody could help me I would be appreciated.. this is so hard.
#sceneo {width:1200px;height:300px;border:1px solid red;margin:0 auto;}
#scenet {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {float:left;position:relative;left:0;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
-webkit-transition-delay:2s;
}
#sca:hover {left:280px;}
<div id="sceneo">
<div id="sca"></div>
<div id="scenet">
</div>
you're almost there! you'll need to create a KEYFRAME animation (as far as I know Opera does not have this yet, but webkit, mozilla, and new IE all support them)
There's a great write up at http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/ about how to use keyframes
here's also a quick jsfiddle: http://jsfiddle.net/2wMVR/3/
from there it should be easy!
If you do not want to deal with keyframes, you could use a CSS3 javascript library such as jQuery Transit that handles all the transitions and stuff for you. In my opinion, it is a lot easier than coding CSS3 by hand.
Here is an example that answers your question:
JS Fiddle Demo
Javascript:
$("#sca").transition({ left: '0px', opacity: 1, delay: 2000 }, 2000, 'in');
Simple enough question:
Is it possible to leverage css transitions when it would would not be appropriate/feasible to trigger animations via pseudo selectors (ie :hover, :active, etc)?
My use case is I want something to animate after form submission. I was thinking I would be able to do something like:
.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }
Then using javascript, I would add the shown class to this element I want to animate.
Why not just use jQuery or similar to animate? I'm glad you asked. The CSS Transitions are much smoother on the iPhone and other mobile devices, which are the platforms I'm targeting. Currently I'm doing animations with jQuery, but they're just not as smooth as they could be.
Edited to clarify what I was asking about pseudo-selectors.
Everything should work as you expect. JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/
.success_message {
opacity: 0.0;
transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
}
.success_message.shown {
opacity: 1.0;
}
If this does not solve your issue, please include further code samples or browser specifics. Good luck!
Yes, you can do that. Css transitions work any time a css property changes, even if it was because the class changed.