CSS3 transitions - Javascript library - css

Does somebody know a little Javascript librabry that will mimic CSS3 transitions for browsers like Firefox 3.6 or IE8?
Example:
-webkit-transition:left 1s ease-in;
I guess such a library is quite hard to develop.
These two support a lot but no CSS3 transitions:
CSSsandpaper
CSSPie
And then we have Modernizr but it only does feature testing.
The great thing about having an extra mini library for CSS3 transitions support is that you don't need to write your own backup code. You could just plug it in and be sure that those transitions work in most browsers.

YOu can try using JQuery animation to mimic the effect, but it still requires some coding. Nothing as simple as CSS3 code for transitions ;(

I was looking for the same library and didn't succeed, so I decided to create it.
Hope that's what you wanted - alevkon / smooth.

Recently I've open sourced a JavaScript library that may help your with your question. It and published under http://transitionjs.org
It allows you to quickly apply CSS transition on elements from JavaScript without editing your CSS. For example, to execute CSS transition you mentioned in your question you would simply write:
transitionjs.begin(element, 'left 0px 100px 1s ease-in');
note: you will need to provide the start and end values of the transition.

Related

How to make this script work on Mozilla and Internet Explorer

#-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/

How to apply CSS transition 2s then cancel although cursor is still hovering?

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. :)

Webkit animations

Very new to CSS webkit animation, and very keen on learning it! And also plenty clueless!!!
So the couple of questions:
What is the best walkthrough/tutorial/official site for CSS webkits?
Do I need to install webkit before I can program it in my CSS files?
Thanks and regards!
Parijat
WebKit is a rendering engine, used in Safari and Chrome. If you have either of those browsers you don't have to install anything. They have several articles about animation on their blog, but I'd also encourage you to Google it because there are lots of other useful articles out there too.
I would recommend you to google for css3 animations.There are a LOT of tutorials. There is also one on w3schools.com. Read those to learn animations.
Webkit is a rendering engine and is used by chrome/safari. So instead of specific search for webkit, unless necessary, i would recommend you to go through searching for css3 tutorials.
For beginning, there are css3 animation generating websites, do look into those, they're helpful in visualizing dynamically what happens with changes in element values.
CSS3 animation generating websites : http://www.css3maker.com/css3-animation.html , http://css3generator.com/

Are photoshop-like blend modes possible in HTML5?

I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.
The <div> would have position: fixed, so the content below it would change quickly.
Is that possible with any HTML5 / CSS3 / canvas / SVG trick?
I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:
// Might be an 'offscreen' canvas
var over = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
See the README for more information, including the currently-supported blend modes.
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.
Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).
This isn't HTML5, but it's as close as I can find for what you're asking.
Javascript blending modes (OpenGL).
I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.
I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.
Here are some demos and explanations:
(demo) http://people.mozilla.org/~roc/filter.xhtml
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.
I wish something like EffectGames suggested:
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.
EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.
This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.
It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
You can already use it with just simple CSS (no Canvas). Example:
mix-blend-mode: 'multiply'
Internet Explorer may not support it, but the other browsers do.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.
This will change with introduction of native blend modes in canvas
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

Are browsers other than Firefox planning on supporting -moz CSS properties, or does CSS3 have an equivalent?

As of right now I believe only Firefox support -moz-border-radius property. I am surprised that twitter uses it.
Are any other browsers planning on supporting this or does CSS3 have something like this in the works?
Edit: I also found -webkit-border-top-left-radius and then the CSS3 version
So when is CSS3 coming out?
CSS3 has border-radius.
For now, Mozilla- and WebKit-based browsers have experimental support, -moz-border-radius and -webkit-border-radius. It's not bad to use them now, as long as you understand they are temporary measures until they are properly implemented. I would expect it's not too long before you see full support for border-radius in Mozilla, Firefox and IE. (Well, hopefully IE.)
Update: as of August 2016, with border-radius being natively available in all native desktop browsers (and most mobile browsers, not to mention), the stringency of using -moz-border-radius, -webkit-border-radius and similar is being slowly relaxed.
Because the CSS3 spec hasn't been finalised, Mozilla and Webkit decided to implement their own method of rounded corners, doing it in the correct way, by adding the vendor-specific tag at the front.
This is done so that when the CSS3 is FINALLY released, should they change how border-radius is supposed to work (eg: the order of the parameters), then none of the sites using the vendor-specific methods will be broken. Mozilla and WebKit can just go ahead and implement the W3C style and developers can slowly move over to that.
It's not too surprising that you're seeing some websites using it, especially for something like rounded corners where it's not going to make a massive difference to the user experience. And I mean, it's just IE users who are missing out, and they deserve everything they get.
It bugs me when people talk about CSS3 coming out. It's not a complete spec like the previous ones. It has been broken up into separate modules that may increment their versions independently.
So Selectors Level 4 may make Recommendation before CSS Backgrounds and Borders Level 3 does.
So, will CSS3 arrive? Eventually, but not all a once. So don't wait for it, start using it now (where applicable).
CSS3 has something like this in the works.
According to this, IE 8 will not support border-radius.
Any CSS property that starts with a dash (e.g. -moz, -webkit) is a browser-specific property.
This allows browser vendors to experiment with new CSS properties. Doing so is a common part of the process for writing new CSS specs, to allow web developers to see how the properties work and raise issues.
Hence you’ll find a lot of CSS 3 properties, like border-radius currently implemented in some browsers with vendor-specific extensions.
There’s nothing particularly wrong with using these on production sites, as long as you’re aware they’ll only work in the one browser.
CSS 3 should be out any decade now :)
Browser-based properties are only meant for interim fixes for that particular browser, and are supposed to be deprecated when either the W3C adopts them into CSS, or not. I wouldn't rely on them to be cross-browser or even be kept for the particular browser.

Resources