I added a fade-in effect for the logo on a web site:
#logo img {
opacity: 0;
-moz-transition: opacity 5s; /* Firefox 4 */
-webkit-transition: opacity 5s; /* Safari and Chrome */
-o-transition: opacity 5s;
transition: opacity 5s;
}
and
<div id="logo"><p><img src="img/logo.png" ... onload="this.style.opacity='1';" /></p></div>
At first view, it seems to work greatly. But on the second (third, ...) page, the logo is just displayed, it does not fade-in in IE9 or FireFox 19 or Opera 12 - only in Safari 5 and Chrome 25, the fade-in effect is available for every page.
I hardly ever do web design, and that's just a nice to have feature I stumbled upon while playing with CSS. I think it is not appropriate to start learning how to use a big library like jQuery which I would use less than once a year.
Is there a simple method to make it work with the other browsers on all pages?
Based on your comments this might work:
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
If you want support for IE you should use jQuery.
Related
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!
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");
});
});
Do you guys have an idea why the following CSS3 transition does not work in Opera, even though -o-transition was used? Firefox and IE 10 render the menu item correctly:
http://jsfiddle.net/JYLZ3/
You could try the following syntax instead:
-o-transition-property: background-color;
-o-transition-duration: 4s;
I just modified the fiddle and this indeed works in Opera 11.62. In fact, it appears you could just use the shorthand form, but include -color to make it work with Opera:
-o-transition: background-color 5s;
Source: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
This is fixed in Opera 12 alpha. -o-transition: background 5s will work.
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.