Creating CSS3 Animations In the previous chapter you’ve seen how to do simple animations like animating a property from one value to another via CSS3 transitions feature. However, the CSS3 transitions provide little control on how the animation progresses over time. The CSS3 animations take it a step further with keyframe-based animations that allow you to specify the changes in CSS properties over time as a set of keyframes, like flash animations. Creating CSS animations is a two step process, as shown in the example below: However, it is not necessary to define the keyframes rules before referencing or applying it. The following example will show you how to animate a <div> box horizontally from one position to another using the CSS3 animation feature. Example You must specify at least two properties animation-name and the animation-duration (greater than 0), to make the animation occur. However, all the other animation properties are optional, as their default values don’t prevent an animation from happening. Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable. Defining Keyframes Keyframes are used to specify the values for the animating properties at various stages of the animation. Keyframes are specified using a specialized CSS at-rule — @keyframes. The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation. Percentages represent a percentage of the animation duration, 0% represents the starting point of the animation, 100% represents the end point, 50% represents the midpoint and so on. That means, a 50% keyframe in a 2s animation would be 1s into an animation. Example Animation Shorthand Property There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code. The animation property is a shorthand property for setting all the individual animation properties at once in the listed order. For example: Example Note: If any value is missing or not specified, the default value for that property will be used instead. That means, if the value for animation-duration property is missing, no transition will occur, because its default value is 0. CSS3 Animation Properties. The following table provides a brief overview of all the animation-related properties. Property Description animation A shorthand property for setting all the animation properties in single declaration. animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element. animation-duration Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation. animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions. animation-delay Specifies when the animation will start. animation-iteration-count Specifies the number of times an animation cycle should be played before stopping. animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing. animation-play-state Specifies whether the animation is running or paused. @keyframes Specifies the values for the animating properties at various points during the animation.

Understanding CSS3 Transitions Normally when the value of a CSS property changes, the rendered result is instantly updated. A common example is changing the background color of a button on mouse hover. In a normal scenario the background color of the button is changes immediately from the old property value to the new property value when you place the cursor over the button. CSS3 introduces a new transition feature that allows you to animate a property from the old value to the new value smoothly over time. The following example will show you how to animate the background-color of an HTML button on mouse hover. Example To make the transition occur, you must specify at least two things — the name of the CSS property to which you want to apply the transition effect using the transition-property CSS property, and the duration of the transition effect (greater than 0) using the transition-duration CSS property. However, all the other transition properties are optional, as their default values don’t prevent a transition from happening. Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable. Performing Multiple Transitions Each of the transition properties can take more than one value, separated by commas, which provides an easy way to define multiple transitions at once with different settings. Example Transition Shorthand Property There are many properties to consider when applying the transitions. However, it is also possible to specify all the transition properties in one single property to shorten the code. The transition property is a shorthand property for setting all the individual transition properties (i.e., transition-property, transition-duration, transition-timing-function, and transition-delay) at once in the listed order. It’s important to stick to this order for the values, when using this property. Example Try this code » Note: If any value is missing or not specified, the default value for that property will be used instead. That means, if the value for transition-duration property is missing, no transition will occur, because its default value is 0. CSS3 Transition Properties The following table provides a brief overview of all the transition properties: Property Description transition A shorthand property for setting all the four individual transition properties in a single declaration. transition-delay Specifies when the transition will start. transition-duration Specifies the number of seconds or milliseconds a transition animation should take to complete. transition-property Specifies the names of the CSS properties to which a transition effect should be applied. transition-timing-function Specifies how the intermediate values of the CSS properties being affected by a transition will be calculated.

3D Transformation of Elements With CSS3 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional space. A transformed element doesn’t affect the surrounding elements, but can overlap them, just like the absolutely positioned elements. However, the transformed element still takes space in the layout at its default (un-transformed) location. Using CSS Transform and Transform Functions The CSS3 transform property uses the transform functions to manipulate the coordinate system used by an element in order to apply the transformation effect. The following section describes the 3D transform functions: The translate3d() Function Moves the element from its current position to a new position along the X, Y and Z-axis. This can be written as translate(tx, ty, tz). Percentage values are not allowed for third translation-value parameter (i.e. tz). Example The function translate3d(25px, 25px, 50px) moves the image 25 pixels along the positive X and Y-axis, and the 50 pixels along the positive Z-axis. The 3D transform however uses the three-dimensional coordinate system, but movement along the Z-direction is not always noticeable because the elements exist on a two-dimensional plane (a flat surface) and have no depth. The perspective and perspective-origin CSS properties can be used to add a feeling of depth to a scene by making the elements higher on the Z-axis i.e. closer to the viewer appear larger, and those further away to the viewer appear smaller. Note: If you apply 3D transformation to an element without setting the perspective the resulting effect will not appear as three-dimensional. The rotate3d() Function The rotate3d() function rotates the element in 3D space by the specified angle around the [x,y,z] direction vector. This can be written as rotate(vx, vy, vz, angle). Example The function rotate3d(0, 1, 0, 60deg) rotates the image along the Y-axis by the angle 60 degrees. You can use negative values to rotate the element in opposite direction. The scale3d() Function The scale3d() function changes the size of an element. It can be written as scale(sx, sy, sz). The effect of this function is not evident unless you use it in combination with other transform functions such as rotate and the perspective, as shown in the example below. Example The function scale3d(1, 1, 2) scales the elements along the Z-axis and the function rotate3d(1, 0, 0, 60deg) rotates the image along the X-axis by the angle 60 degrees. The matrix3d() Function The matrix3d() function can perform all of the 3D transformations such as translate, rotate, and scale at once. It takes 16 parameters in the form of a 4×4 transformation matrix. Here is an example of performing the 3D transformation using the matrix3d() function. Example However, when performing more than one transformation at once, it is more convenient to use the individual transformation function and list them in order, like this: Example 3D Transform Functions The following table provides a brief overview of all the 3D transformation functions. Function Description translate3d(tx,ty,tz) Moves the element by the given amount along the X, Y & Z-axis. translateX(tx) Moves the element by the given amount along the X-axis. translateY(ty) Moves the element by the given amount along the Y-axis. translateZ(tz) Moves the element by the given amount along the Z-axis. rotate3d(x,y,z, a) Rotates the element in 3D space by the angle specified in the last parameter, around the [x,y,z] direction vector. rotateX(a) Rotates the element by the given angle around the X-axis. rotateY(a) Rotates the element by the given angle around the Y-axis. rotateZ(a) Rotates the element by the given angle around the Z-axis. scale3d(sx,sy,sz) Scales the element by the given amount along the X, Y and Z-axis. The function scale3d(1,1,1) has no effect. scaleX(sx) Scales the element along the X-axis. scaleY(sy) Scales the element along the Y-axis. scaleZ(sz) Scales the element along the Z-axis. matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) Specifies a 3D transformation in the form of a 4×4 transformation matrix of 16 values. perspective(length) Defines a perspective view for a 3D transformed element. In general, as the value of this function increases, the element will appear further away from the viewer.

2D Transformation of Elements With CSS3 2D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a two-dimensional space. A transformed element doesn’t affect the surrounding elements, but can overlap them, just like the absolutely positioned elements. However, the transformed element still takes space in the layout at its default (un-transformed) location. Using CSS Transform and Transform Functions The CSS3 transform property uses the transform functions to manipulate the coordinate system used by an element in order to apply the transformation effect. The following section describes these transform functions: The translate() Function Moves the element from its current position to a new position along the X and Y axes. This can be written as translate(tx, ty). If ty isn’t specified, its value is assumed to be zero. Example The function translate(200px, 50px) moves the image 200 pixels horizontally along the positive x-axis, and 50 pixels vertically along the positive y-axis. The rotate() Function The rotate() function rotates the element around its origin (as specified by the transform-origin property) by the specified angle. This can be written as rotate(a). Example The function rotate(30deg) rotates the image in clockwise direction about its origin by the angle 30 degrees. You can use negative values to rotate the element counter-clockwise. The scale() Function The scale() function increases or decreases the size of the element. It can be written as scale(sx, sy). If sy isn’t specified, it is assumed to be equal to sx. Example The function scale(1.5) proportionally scale the width and height of the image 1.5 times to its original size. The function scale(1) or scale(1, 1) has no effect on the element. The skew() Function The skew() function skews the element along the X and Y axes by the specified angles. It can be written as skew(ax, ay). If ay isn’t specified, its value is assumed to be zero. Example The function skew(-40deg, 15deg) skews the element -40 degree horizontally along thex-axis, and 15 degree vertically along the y-axis. The matrix() Function The matrix() function can perform all of the 2D transformations such as translate, rotate, scale, and skew at once. It takes six parameters in the form of a matrix which can be written as matrix(a, b, c, d, e, f). The following section will show you how each of the 2D transformation functions can be represented using the matrix(). Here is an example of performing the 2D transformation using the matrix() function. Example However, when performing more than one transformation at once, it is more convenient to use the individual transformation function and list them in order, like this: Example 2D Transform Functions The following table provides a brief overview of all the 2D transformation functions. Function Description translate(tx,ty) Moves the element by the given amount along the X and Y-axis. translateX(tx) Moves the the element by the given amount along the X-axis. translateY(ty) Moves the the element by the given amount along the Y-axis. rotate(a) Rotates the element by the specified angle around the origin of the element, as defined by the transform-origin property. scale(sx,sy) Scale the width and height of the element up or down by the given amount. The function scale(1,1) has no effect. scaleX(sx) Scale the width of the element up or down by the given amount. scaleY(sy) Scale the height of the element up or down by the given amount. skew(ax,ay) Skews the element by the given angle along the X and Y-axis. skewX(ax) Skews the element by the given angle along the X-axis. skewY(ay) Skews the element by the given angle along the Y-axis. matrix(n,n,n,n,n,n) Specifies a 2D transformation in the form of a transformation matrix comprised of the six values.

Using CSS3 Drop Shadows The CSS3 gives you ability to add drop shadow effects to the elements like you do in Photoshop without using any images. Prior to CSS3, sliced images are used for creating the shadows around the elements that was quite annoying. The following section will describe you how to apply the shadow on text and elements. CSS3 box-shadow Property The box-shadow property can be used to add shadow to the element’s boxes. You can even apply more than one shadow effects using a comma-separated list of shadows. The basic syntax of creating a box shadow can be given with: box-shadow: offset-x offset-y blur-radius color; The components of the box-shadow property have the following meaning: See the CSS3 box-shadow property to learn more about the other possible values. Example Note: When adding the box-shadow, if the value for the blur-radius component is not specified, or set to zero (0), the edges of the shadow will be sharp. Similarly, you can add the multiple box shadow using a comma-separated list: Example CSS3 text-shadow Property You can use the text-shadow property to apply the shadow effects on text. You can also apply multiple shadows to text using the same notation as box-shadow. Example

Handling Text Overflow in CSS3 CSS3 introduced several new property properties for modifing the text contents, however some of these properties are existed from a long time. These properties give you precise control over the rendering of text on the web browser. Hiding Overflow Text Text can overflow, when it is prevented from wrapping, for example, if the value of white-space property is set to nowrap for the containing element or a single word is too long to fit like a long email address. In such situation you can use the CSS3 text-overflow property to determine how the overflowed text content will be displayed. You can either display or clip the overflowed text or clip and display an ellipsis or a custom string in palace of the clipped text to indicate the user. Values Accepted by the word-break property are: clip and ellipsis and string. Example Warning: The string value for the text-overflow property is not supported in most of the web browsers, you should better avoid this. Breaking Overflow Text You can also break a long word and force it to wrap onto a new line that overflows the boundaries of containing element using the CSS3 word-wrap property. Values Accepted by the word-wrap property are: normal and break-word. Example Tip: Please check out the individual property reference for all the possible values and the Browser support for these CSS properties. Specify Word Breaking Rules You can also specify the line breaking rules for the text (i.e. how to break lines within words) yourself using the CSS3 word-break property. Values Accepted by the word-break property are: normal, break-all and keep-all. Example