CSS3 - Khai's personal knowledge vault.

CSS3

http://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/
http://www.sitepoint.com/exploring-classlist-api
http://www.sitepoint.com/creating-vintage-television-using-bem-css3-javascript

Blending images and text:
http://www.sitepoint.com/close-up-css-mix-blend-mode-property/

Rotation:
HTML clocks using JavaScript and CSS rotation

Gradient:
http://www.sitepoint.com/css-gradients-a-syntax-crash-course
Cross browser CSS Gradient
Speed Up with CSS3 Gradients
CSS3 Linear Gradients
CSS Gradient

Transformation:
Cross Browser CSS Transforms – even in IE
Rotate Elements with CSS Transformations

Animation:
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ - *
http://www.webdeveloperjuice.com/2010/02/25/10-shocking-animations-using-css-and-i-mean-only-css/ - *
http://www.sitepoint.com/syncing-css-animations-with-html5-audio
http://www.sitepoint.com/animation-keyframe-gotcha/

Transition:
CSS Transitions 101
Fading Button Background Images With CSS3 Transitions
http://www.sitepoint.com/advanced-css3-transitions/
http://www.sitepoint.com/css3-transitions-cubic-bezier-timing-function/

Reflection:
Web Directions Reflections, part 4: Hardboiled Web Design and SVG Salutations
Image Reflections with CSS

Progress bar:
Progress Trackers in Web Design: Examples and Best Practices

What is the purpose of the will-change property?

The will-change CSS property allows an author to inform the UA ahead of time of what kinds of changes they are likely to make to an element. This allows the UA to optimize how they handle the element ahead of time, performing potentially-expensive work preparing for an animation before the animation actually begins.

How is will-change used?

The will-change property is only effective when used at a certain time. We can’t apply something like will-change: transform to an already-transforming element — it just doesn’t make sense.

.will-change:active {
  will-change: transform;
  transition: transform 0.3s;
  transform: scale(1.5);
}

Here, a change is already taking place by the time we inform the browser, totally cancelling out the whole point of the will-change property. If we want the browser to know ahead of time when to expect changes, we will have to inform it at the right moment. For an element to achieve an active state, it must first be hovered. We can then do something like this:

.will-change {
  transition: transform 0.3s;
}

.will-change:hover {
  will-change: transform;
}

.will-change:active {
  transform: scale(1.5);
}

This small example gives us some insight into the thought process needed to properly use the will-change property. But before we continue with more examples, we need to be aware of some important considerations. Browsers, by nature, try their absolute best to optimise and be prepared for changes. Browsers will remove certain optimizations as soon as they can in order to free up memory. Using the will-change property directly on an element, though, insists to the browser that the element in question is always very close to a change. This forces the browser to maintain optimizations, thus increasing memory consumption. With that in mind, we need to have a way of adding and removing the will-change property at the right times. The first example does this for us, because the property will only get added on hover. But what if we wanted the transform to actually occur on hover? You might be tempted to do this:

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}

.will-change:hover {
  transform: scale(1.5);
}

This will result in an increase in memory consumption though, because we’re forcing the browser into thinking that the element is close to being changed at all times. We can get around this by instead looking for a hover event on the parent container:

.will-change-parent:hover .will-change {
  will-change: transform;
}

.will-change {
  transition: transform 0.3s;
}

.will-change:hover {
  transform: scale(1.5);
}

This adds the optimization when the mouse enters the parent container, and removes it when the mouse leaves. It also, however, implies that every time the mouse enters the parent container, the browser can expect a change on the element. This isn’t necessarily the case, and presents a perfectly clear example of how easy it is to abuse this property.

How to add or remove the will-change property using JavaScript?

var el = document.querySelector('.element');

el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  this.style.willChange = 'transform';
}

function removeHint() {
  this.style.willChange = 'auto';
}

Of course, you’d need to include the necessary JavaScript to add the correct clicked class when the element is actually clicked, but the above script should give you some insight into how to prepare the browser for changes, and to release memory once the changes are complete. When the mouse enters the element, the will-change property is added. When it’s clicked and the transform occurs (by your corresponding script), animation events will be sent out. On animationEnd we’ll remove the will-change property, freeing up memory once again.

page revision: 50, last edited: 08 Jan 2016 04:36

Edit Tags History Files Print Site tools + Options

Khai's personal knowledge vault.

Materials on this site are not original. When possible, references to original articles are listed on each page.

Other interesting sites

Right from 'Scratch!!'

塔尔塔罗斯

Echo Bazaar

Half Moon Bay Weyr