Abandoned css linear transition function? - css

In MDN References for CSS transitions, there is a line in the grammar section referring to a transition that is named linear but takes arguments.
<linear-easing-function> =
linear( <linear-stop-list> )
But I could not find any documentation or example of using it anywhere online. Is it possible that it's just in CSS grammar, but it's not implemented in the engine for some reason?

It’s a draft, part of CSS Easing Functions Level 2. It’s only implemented in Firefox Nightly so far.

Related

Angular ngAnimate causes width animations to jump

I am using Angular with ngAnimate for a couple of cases. In another, I have a directive that is changing the width of the column (using Bootstrap col-md-* classes) and a simple transition that looks like this:
.column-view .column {
transition: width 1s;
}
I am not explicitly using ngAnimate here, but it is certainly causing me grief simply for being included. Basically, the transition jumps to zero before transitioning to the new width. If I remove ngAnimate from my module, the transitions are smooth, but I need ngAnimate for other features in my app.
Can I disable whatever ngAnimate is doing to my plain CSS transition? What can I do here to fix this? Driving me crazy.
Here is a fiddle demonstrating the problem. See the comments for instructions to reproduce.
NOTE: I used current latest version (AngularJS 1.2.6) to investigate your issue.
I found there is a "blockTransitions" function being called internally, which does just that: it blocks transitions.
https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1099
If you comment the line linked above (the single line of the "blockTransitions" function body), the problem is solved.
As I can't tell if this is a proper solution (and probably it is not), I've just created a PR so they can properly resolve the issue:
https://github.com/angular/angular.js/pull/5552
Also using latest version, there is a workaround: http://jsfiddle.net/2fnhr/3/
app.config(function($animateProvider){
$animateProvider.classNameFilter(/^((?!col-md).)*$/);
});
This will only apply the ngAnimate stuff for classes which does not contain "col-md" on its name, thus turning off the ngAnimate for the Bootstrap classes in question.
Explanation of the regular expression here: https://stackoverflow.com/a/406408/370290

Is it possible to detect support of CSS3 functions like attr() or url() using Modernizr?

I've been searching for a while for a Modernizr test for CSS functions like attr(), but I couldn't find anything. Is there a way to test these features?
CSS functions vary a great deal in their use, and count as values rather than properties or selectors, so there isn't a generic Modernizr test for them. However, it does provide feature detection for some specific functions:
RGBA and HSLA color values: Modernizr.rgba and Modernizr.hsla
Gradients: Modernizr.cssgradients
Transforms: Modernizr.csstransforms for 2D transforms and Modernizr.csstransforms3d for 3D transforms
Modernizr does not provide feature detection for url() because that has been around forever and every browser supports it fully.
It also does not provide feature detection for attr(), but for what it's worth, every browser that does implement attr() (IE8+ and other browsers) only implements it as defined in CSS2.1. As of 2013, no implementation exists for the version defined in Values and Units level 3.
Note that CSS2.1 attr() is only usable with the content property on the :before and :after pseudo-elements, which Modernizr does offer feature detection for in the form of Modernizr.generatedcontent.

Purpose of #keyframes in css3

I came across #keyframes somewhere in css3 codes. I couldn't find about it in much detail in stackoverflow. Even this question answers the # rules except #keyframes.
Can somebody explain or provide a good link about #keyframes in detail?
Thanks in advance.
Have a read of: http://css3.bradshawenterprises.com/animations/
They just set the parameters for different stages of an animation, this lets you perform complex animations using CSS.
The #keyframes at-rule is intended to define a CSS3 animation and usually has vendor prefixes in the real CSS code, since the standardization/implementation dust hasn't settled down yet. You can find more about WebKit's implementation (#-webkit-keyframes) from their blog post... or about the general stuff here.

CSS3 transitions - Javascript library

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.

CSS3 specifications on w3.org

http://www.w3.org/TR/css3-roadmap/
Hasn't CSS3 been out since a while now? Why is most of the specification not complete?
Is there a complete reference anywhere on the web (or in a book)?
CSS 2.1 was finalized only a couple of years ago. As Hogan said, this could take 10 years. CSS3 was introduced just a few years ago itself. Standards are based on implementation, not invention.
This work takes time, a lot to be done.
Check "CSS3 for Web Designers"
http://books.alistapart.com/products/css3-for-web-designers
Wikipedia has a nicely compiled list of CSS3 specs.
Does this link help: http://www.w3.org/TR/#tr_CSS
Standards are a slow process -- you can see newer stuff in that list. A book is probably your best bet to see a "distilled" version.
This is a presentation I wrote showing the state of the union in HTML5 (and satellite specs) and CSS3. The CSS3 section is in the middle.
CSS3 basics are there, but there are many advanced features that have not been implemented yet, and IE is particularly laggard.
Yes, this is correct CSS3 has advanced features it is not been in use as much it has o be i would like to enhance the face the web by utilising those features of CSS3
The problem is it's hard to find an authoritative single source of documentation for CSS3. CSS2.1 spec was easy to find. It was one monolithic easy to read spec even when it was a draft. However:
for CSS beyond Level 2, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable chunks and allows more immediate, incremental improvement to CSS.
That does not mean there can't be a monolithic view of the modules and how they fit together. I don't think they really value that in the CSS3 WG right now for some reason. This has been asked on the CSS3 mailing list last year, this the reply:
... years ago, there was probably still some feeling that we
would produce an omnibus CSS3 spec similar to the 2.1 spec, but that
feeling died a long time ago. (If we ever do produce such a thing,
it'll be automated.)
You can see all of our specs at http://dev.w3.org/csswg/, though,
which is similar to having an omnibus document with a
not-very-useful title page!
They also do these snapshots summaries of all CSS work to date, which aren't very useful or readable.

Resources