Pro CSS3 Animation

ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon

Listing 10-2. A Transition Utilizing a CSS Custom Filter

#shaded-element {
filter: custom(url(‘wobble.vs’)
40 40,
amplitude 60,
amount 0.0);
)
transition: filter ease-in-out 2s;
}

The number pair 40 40 works to define the density of the virtual mesh that the element is divided into:
more divisions will create a smoother, more fluid, and detailed effect. amplitude is the strength of the effect, and
amount is the degree to which the element is affected.
The wobble.vs (vertex shader) file referred to in the first line is written in the OpenGL ES shading language,
utilizing the same syntax used in WebGL to create browser-native 3D on web pages, as shown in Listing 10-3.

Listing 10-3. An OpenGL ES Shader

precision mediump float;
attribute vec3 a_position;
attribute vec2 a_texCoord;
uniform mat4 u_projectionMatrix;
uniform float amplitude;
uniform float amount;
varying vec2 v_texCoord;
const float rotate = 20.0;
const float PI = 3.1415926;
mat4 rotateX(float a) {.. .}
mat4 rotateY(float a) {.. .}
mat4 rotateZ(float a) {.. .}
void main() {
v_texCoord = a_texCoord.xy;
vec4 pos = vec4(a_position, 1.0);
float r = 1.0 - abs((amount - 0.5) / 0.5);
float a = r rotate PI / 180.0;
mat4 rotX = rotateX(a);
mat4 rotY = rotateY(a / 4.0);
mat4 rotZ = rotateZ(a / 8.0);
float dx = 0.01 cos(3.0 PI (pos.x + amount)) r;
float dy = 0.01 cos(3.0 PI (pos.y + amount)) r;
float dz = 0.1 cos(3.0 PI (pos.x + pos.y + amount)) r;
pos.x += dx;
pos.y += dy;
pos.z += dz;
gl_Position = u_projectionMatrix rotZ rotY rotX pos;
}

As you can see, this is very different from the CSS you are familiar with: it is an entirely new language.
Yet applying all this as a transition for the #shaded-element (shown in Listing 10-4) very much returns to the
principles you explored in Chapter 2.