I'm really not sure if this question should be here, if not, please forgive me, but I'm intrigued in the reason why Chrome/Safari still prefix CSS3 animations, given that any other major browser supports them as standart, some even since a long time. (IE +9, Firefox +15, Opera +12.0 according to this)
#keyframes anim{}
#-webkit-keyframes anim{}
div{
animation:anim;
-webkit-animation:anim;
}
Is it still considered an experimental technology?
Thanks!
Related
#-webkit-keyframes animation{
0%{background-image:url(img/bg.jpg);}
25%{background-image:url(img/bg1.jpg);}
50%{background-image:url(img/bg2.jpg);}
75%{background-image:url(img/bg3.jpg);}
100%{background-image:url(img/bg4.jpg);}
}
I already know about changing the -webkit- with -moz- and all, it's not what i'm asking, i just want to know how to get this to work on Mozilla and Explorer, because for some reason i don't understand it doesn't
Unfortunately, background images cannot be changed in #keyframes animations.(Except in Chrome) The reason is that images cannot be changed step-by-step Like background colors. Your best bet would be to place all the images on top of each other using position:absolute; and then change their opacity using #keyframes. A SO question about it can be found here
Making CSS slideshows using opacity is a little harder and requires more coding but are still quite easy.
There are some good tutorials out there about it- try these:
http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
http://cssnerd.com/2011/10/04/pure-css3-slideshow/
There is also some really neat thing you can do using some jquery as well:
http://css3.bradshawenterprises.com/cfimg/
It seems I encountered something in CSS a couple years back, on end or stop, some term or syntax, for turning off an animation after a time, supplied in the declaration... but not having any luck on google finding that. Is there a way to snap back/undo a transition while :hover state still active?
I'm pretty sure that animation-play-state would be what you're looking for. Note that no browser supports this property. Safari, Chrome, Opera and Firefox do support it with the prefix however, but note that the prefix -moz- (for FireFox), -webkit- (for Webkit-based browsers like Chrome and Safari), and -o- (for Opera) is mandatory for the code to function, or to be recognized at all.
For a more cross-browser solution, you'd probebly find yourself turning to JavaScript, or a library that utilizes it. For example, a JavaScript function() could be called during execution, triggering the stop of the animation, with the delay using setTimeout. This would definitely be something that wouldn't be to hard at all to accomplish.
You were mentioning in your question a stop script. jQuery (a JavaScript library) does have something of the sort: http://api.jquery.com/stop/. The only problem is that the transition has to be triggered using the transition jQuery code, but that shouldn't be so hard considering that jQuery is a short-hand coding language, and is really well documented.
Tell me if this helps.
And don't forget to accept this answer as correct if it helped. :)
I have a question regarding css3 animation. I know that it works well in all browsers except Internet Explorer(IE-7/8/9). How can I make it work in the older versions of IE as well?
You may find useful cssSandpaper – a CSS3 JavaScript Library.
Do we still need to use the browser prefixes for css3 properties, for example -moz-box-shadow, -moz-transition: all 0.3s ease-out; etc?
An important thing to take into consideration is that if you are using Vendor Prefixes, then you are clearly using an experimental feature - not only will this property not work in older versions of the browsers you're targeting, and should thus not be used for anything essential, but they are also subject to change. You really shouldn't use experimental features in a production environment.
To answer your question, if you want to target a browser that only supports a vendor-prefixed version of the CSS property, then yes, you do need to do that. However, if you include a non-vendor-prefixed version of it as well, then all browsers will support that declaration eventually.
Found the entry on someone's blog here on SO and I think it's useful. You can use Javascript to make it compatible for all browsers without writing CSS properties for every single browser
For now, yes. Some properties are not supported by all browsers or in different ways since not all properties are set in the standard.
Css3 info
Yes (at this moment). Since modern browsers do not support the same set of CSS3 effects yet, prefixes are still needed.
If you only want to support the latest browsers, then no. Many companies are still using older versions of Firefox or IE, however. So by dropping the extensions you won't have those features, even if the browser supports them.
One important thing is to make sure you use the 'proper' CSS3 rule after the other rules, in this way the browser will use this rule if and when it becomes available. e.g.:
webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius:6px;
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.