Implementing CSS3 Transformations,
Transitions, and Animations

I.  Learning Objectives:

By the end of this tutorial, you will be able to:

  1. Animate 2D and 3D elements using CSS 3 transformations, transitions and animation.

  2. Apply text and object formatting, create gradients, apply shadow effects and use web fonts.

II. Background Information

CSS3 is the newest standard for CSS.  It is completely backwards compatible with earlier versions which means it includes all older forms of CSS.

CSS3 has been split into "modules".   Some of the more significant modules include:

Using HTML 5 and CSS3 allows developers to enhance the appearance of objects, animate objects and create games.

CSS3 significantly expands what you can do iin cascading style sheets.  Quite often, when a large number of new features are incorporated into a language, it takes a while for all the browsers to catch up.  For example, it took about 5 years for the <audio> and <video> tag that are now in HTML 5 to actually work in all the browsers - those tags were introduced and then over time, the browsers incorporated them.  

Anytime, new features are added to a web language like HTML and CSS, vendor prefixes are tacked onto the code which makes them fully compatible. If you come across older pages or style sheets developed before the browsers recognized commands, you will definitely see the prefixes (they don't need to be removed after browsers are updated, so many pages still include them).

You will also see prefixes on commands that are new to CSS (they are continually expanding the language).

Here's a full list of prefixes and which browsers they go with:

There is a website you can check that will tell you how close things are to becoming fully standardized:  http://caniuse.com    If you click on the command you want to check, it will tell you which browser versions support the code.   The W3C site also includes information on what is supported and what requires vendor prefixes.

In this lesson, we are going to focus on the CSS3 properties we haven't covered yet and we will review some of the more popular CSS3 styles that we have used.

III. Text and Object Formatting

A. Rounded Corners (border-radius - review)

To create rounded corners on a box,  use the border-radius property.  In order to see the effect, you need to have a background-color, border or background-image applied to the element.

Syntax: border-radius:# pixels;

NOTE:  specifying rounded corners using border-radius is similar to margins and padding because you can specify rounded corners separately using:  border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius    For example, if you wanted the upper left and lower right corners rounded, you would use border-top-left-radius:25px;  border bottom-right-radius:25px; 

Example of all corners rounded with a background color displayed:

I am a do nothing box
with rounded corners.

Here's the code used to create the box:

<p style="background-color:peachpuff;border-radius:25px;text-align:center;padding:10px;width:183px; height: 55px;">
I am a do nothing box<br>with rounded corners.</p>

Example with the top right and bottom right borders rounded and an orange border displayed:

I am a do nothing box
with rounded corners.

Here's the code used to create the box:

<p style="border:5px solid orange;border-top-right-radius:25px;border-bottom-right-radius:25px;text-align:center;padding:10px;width:183px; height: 55px;">
I am a do nothing box<br>with rounded corners.</p>

Example with the bottom left and bottom right corners rounded:

I am a do nothing box
with rounded corners.

Here's the code used to create the box:

<p style="border:5px solid purple;border-bottom-right-radius:25px;border-bottom-left-radius:25px;text-align:center;padding:10px;width:183px; height: 55px;">
I am a do nothing box<br>with rounded corners.</p>

To try this live, view: https://www.w3schools.com/css/tryit.asp?filename=trycss3_border-radius

B.  Backgrounds

We have been using background-color and background-image for several weeks.  CSS3 has expanded the background properties to provide greater flexibility and control over how backgrounds display.

New features include:

1.  Applying layered multiple backgrounds

If you specify multiple backgrounds, the images will stack on top of each other.  The first image rendered in the css using the background-image property is the one that is on the top.

Syntax:  background-image:url(filename), url(filename), url(filename);

To see a live example showing a background texture with a flower on top, view:  https://www.w3schools.com/css/tryit.asp?filename=trycss3_background_multiple

NOTE:  For background layering to work, the images should be the same size.

2.  Specifying the background size without editing images!

Prior to CSS 3, the size of the background was the size of the image.  the background-size property lets you change the size of the image.

Syntax: background-size: width  height;

where width and height can be:

To view  alive example illustrating contain and cover, view: https://www.w3schools.com/css/tryit.asp?filename=trycss3_background-size_contain   You will notice in the cover image, it is larger and the edges of the images aren't showing.

3.  Specify the area (border, padding or content) for the background image

The background-origin property lets you specify where the background image is positioned relative to the border, padding and content areas of a box. 

The position is based on 3 values:  border-box, padding-box and content-box

Syntax:  background-origin:value;

Where value can be:

To see how this looks, view:  https://www.w3schools.com/css/tryit.asp?filename=trycss3_background-origin    You will notice the border-box setting has the top of the image below the border; whereas the content-box setting has space between the border and image because of the padding.  If you change border-box to padding-box, you will see the image touch the border, but it isn't under the border like it is with border-box.

4.  Specify the area (border, padding or content) for the background color

The background-clip property lets you specify the area you want the background color applied to in relation to the border, padding and content areas of a box.

The position is based on 3 values:  border-box, padding-box and content-box

Syntax:  background-clip:value;

Where value can be:

To view an interactive example, see:  https://www.w3schools.com/css/tryit.asp?filename=trycss3_background-clip

 

C.  Colors

We have already covered how to apply color using color names, hex# and rgb values.  There are additional ways to specify color in CSS.

1.  RGBA

This is similar to rgb, with an alpha (transparency) setting tacked onto the end where 0.0 is transparent  1.0 is solid

Syntax:  background-color:rgba( red, green, blue,.alpha);

Red, Green and Blue can be between 0 and 255
Alpha can be between 0.0 (transparent) and 1.0 (solid)

To view this live, see:  https://www.w3schools.com/css/tryit.asp?filename=trycss_color_rgba2

2.  HSL

Colors can be identified using levels of hue, saturation and lightness. 

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. 

Saturation typically describes color intensity.  100% is pure color, no shades of gray.  50% is 50% gray, but you can still see the color.  0% is completely gray, you can no longer see the color.

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Syntax:  background-color:hsl(hue, saturation,lightness);

To see an interactive example, view: https://www.w3schools.com/css/tryit.asp?filename=trycss_color_hsl_lightness

3.  HSLA

Similar to HSL with alpha (transparency) tacked onto the end.

Syntax: background-color:hsla(hue, saturation, lightness, alpha);

To see an interactive example, view:  https://www.w3schools.com/css/tryit.asp?filename=trycss_color_hsla2

D.  Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors.

Prior to CSS 3, you had to use images for these effects.  Using CSS to generate the gradiant has a couple of advantages over images:

1.  it takes less time to load the image

2. the gradient doesn't degrade if you zoom in  (it looks the same)


CSS3 defines two types of gradients:

Linear Gradients - colors transition in a line which can go horizontally, diagonally or vertically across the object.

Radial Gradients - colors transition from the center to the edge

1  Creating Linear Gradients

Linear gradients have direction in addition to color.  That makes them a little more difficult to create unless you want the gradient to go from top to bottom which is the default.

NOTE: All of the current browsers recognize gradients, if you are concerned that users with older browsers may view your pages, you should prefix them with -webkit- (chrome, safari, ios), -moz- (firefox) and -o (Opera). 

Syntax:  linear-gradient:(direction, color1, color2, color3, colorN);

Colors can use color names, hex# or rgb values  (you can also use rgba where the a is for transparency, hsl or hsla).

Direction can be accomplished by specifying text or by using degrees.  

a)  Using text commands for direction works well (if you can remember the commands :)

To practice this live, view:  https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_diagonal    Enter the different direction values that are boldfaced in the list above and see how it affects the gradient  (you only need to use the line with the standard syntax - all current browsers can handle gradients).

b)  Using degrees is very easy and gives you the most control.  As you increase the number of degrees, the gradient will move clockwise.   0deg  results in a gradient that is top to bottom, 90deg is right to left,  180deg is bottom to top and 270deg is left to right.   If you increment by 45deg, you will get diagonal gradients.  If you increment by 90deg, you will get gradients that extend from the top or bottom and from the sides.

Sides and Top or Bottom:

Diagonal:

Example #1   The box below shows a linear gradiant set up with a top down transition and 5 colors:

 

Here's the CSS code used to create the box (the code is including the different prefixes so you can see how they are used):

.fromTopGradient{
    height: 200px;
    width:200px;
    background: -webkit-linear-gradient(0deg, mistyrose, pink, red, pink, white); /* For Safari and mobile devices */
    background: -o-linear-gradient(0deg, mistyrose, pink, red, pink, white); /* For Opera  */
    background: -moz-linear-gradient(0deg, mistyrose, pink, red, pink, white); /* For Firefox  */
    background: linear-gradient(0deg, mistyrose, pink, red, pink, white); /* Standard syntax (must be last) */
}

In the <body> of the page, the code below was used:

<div class="fromTopGradient"></div>

Example #2  The box below shows a diagonal gradient with a top right to lower left tansition and 3 colors

NOTE: Gradients will only show up in the current versions of the web browsers. If you are using an older browser, you won't see the boxes. 

Here's the CSS code used:

.fromTopRightDiagGradient{
    height: 200px;
    width:200px;
    background: linear-gradient(45deg, white, orange, white);
}

In the <body> of the page, the code below was used:

<div class="fromTopRightDiagGradient"></div>

Here's an example showing transparency in the gradient: 

Here's the CSS code: 

.transparentGradient{
    height: 200px;
    width:200px;
    background: linear-gradient(180deg, rgba(255,51,153,1), rgba(255,204,229,.25),rgba(255,51,153,0));
}

The last value in rgba is for transparency.  0 is fully transparent, 1 is solid.  The decimals between 0 and 1 indicate the level of transparency.  There are 3 colors specified.  The first color has a transparency of 1 which means it is solid.  The second color has a transparency of .25 which means 75% transparent.  The last color has a transparency of 0 which is fully transparent.  Between these settings the gradient becomes gradually transparent


2.  Creating Radial Gradients

To create a radial gradient, you need at least two colors.  One will be in the center and the gradient transitions outward to the other color (or colors)

Syntax:  radial-gradient(shape, color %,  position, color1, color2 , colorn );

shape - the default is circle.  If you omit this, that will be the shape of the innermost color.

color % - you can specify the percentage of each color that you want in the gradient.  So, if you had an orange to yellow gradient and you wanted more orange than yellow, you can specify 75%  25%  and then when you list the colors, you would need to list orange first because that would correspond to the 75%

position:  values can be closest-side, farthest-side, closest-corner or farthest-corner

colors - you can use color names, hex#, rgb, rgba, hsl or hsla

Here's an Example:

Here's the CSS Code (the code was entered as an inline style):

<div style="
    height: 150px;
    width: 150px;
    border-radius:50%;
    background: radial-gradient(75% 25%, closest-side, white, orange);
</div>

Here's the same example without the position specified and with slightly different percentages:

Here's the code:

<div style="
     height: 150px;
    width: 150px;
    border-radius:50%;
    background: radial-gradient(60% 40%, white, orange);
</div>

3.  Repeating Gradients

Repeating gradients can be created with radial or linear gradients. 

With a radial gradient, the initial gradient is repeated from the center out

Radial Example:

Here's the inline CSS used to create the example:

<div style="
    height: 150px;
    width: 200px;
    border-radius:50%;
    background: repeating-radial-gradient(peachpuff, orange 40%);
</div>

Here's the same example with orange set to 20% instead of 40%

 

Linear Example:

Here's the inline CSS used to create the example:

<div style="
    height: 150px;
    width: 200px;
    background: repeating-linear-gradient(peachpuff, orange 10%);
</div>

E.  Shadows (Review)

There are two types of shadows you can apply:  text-shadow and box-shadow.  We have used both in previous weeks, so this is a short review of how to use each.

1.  text-shadow applies shadow to text

Syntax: text-shadow: #pixels (horizontal)   #pixels (vertical)   #pixels (blur)  color;

To view an interacive live example, see:

To place a border around text, use the following syntax:

 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

NOTE: the color can be adjusted to whatever you want, the example puts a black outline around the text

2.  box-shadow applies a shadow to a box element

Syntax:  box-shadow: #pixels (horizontal)  #pixels (vertical)  #pixels (blur)  color;

To view an interactive example, see:

https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-shadow3

F.  Text (new features in CSS 3)

There are 3 new text properties in CSS 3:  text-overflow, word-wrap and word-break

1.  text-overflow

You can specify how text that isn't displayed should be signaled to the user  (this situation occurs when the container is too small to display the contents).

Syntax: text-overflow: clip or ellipsis;

It is much more user friendly to display the ellpsis than to clip the text :)   

To see a live example, view: https://www.w3schools.com/css/tryit.asp?filename=trycss3_text-overflow

A better alternative is to set overflow to auto (that will enable a scrollbar so they can see all the text).  You can also set up the text to display the overflow when you hover over it.  To do that, you would need to set up some type of class and connect the class to an element.  You would also need to connect the element and class to the  hover pseudo element.

In the example below, p.text specifies that anything in a paragraph that uses the text class will have a width of 200, text will not wrap and overflow text will be hidden.   p.text:hover specifies that when you point at the text, the overflow portion should display.

p.text{
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    border: 1px solid #000000;
}

p.text:hover{
     text-overflow: inherit;
    overflow: visible;
    white-space:normal;
}

Here's a live example (point at the text and you should see the portion that is not displayed)

Take me out to the ball game, Take me out with the crowd; Buy me some peanuts and Cracker Jack, I don't care if I never get back. Let me root, root, root for the home team, If they don't win, it's a shame. For it's one, two, three strikes, you're out, At the old ball game.

NOTE:  We used the white-space property in the example above.   The purpose of the property is to specify that text will never wrap.  white-space: nowrap turns word wrap off.   white-space:normal turns word wrap on

2.  word-wrap

As we saw above, white-space can affect word wrapping within a container.    Hmmm, then what does the word-wrap property do?  

The word-wrap property allows you to break long words into multiple lines (you can basically force text to wrap even if it means splitting a word).

Syntax:  word-wrap:value;

Where value can be:

To see an interactive example, view: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

3.  word-break

The property allows you to specify line breaking rules.

Syntax:  word-break: keep-all or break-all;

To see a live example, view: https://www.w3schools.com/css/tryit.asp?filename=trycss3_word-break

G.  Web Fonts (@font-face)

So far, we have used the Google Font API (application interface) to include different fonts that are not on the end-user's system. 

There is another method you can use that allows you to use fonts you have downloaded from the web and ensure that the user can view the font.  

This method involves using the @font-face property to name the font and associate a url with the name.  You will need to upload the font to the web server if you use this method, so make sure the font allows you to freely distribute it

Syntax:

@font-face {
     font-family:nameYouGiveTheFont;
     src:url(fonts/fontFileName);
}

nameYouGiveTheFont is the name you are going to use to apply the font to different selectors

fonts/fontfilename is the folder and name of the original font file

IMPORTANT:  Always use lowercaseletters for the font URL (the Internet Explorer has issues with uppercase letters)   If the original font has uppercase letters and spaces, you will need to rename it to all lowercase and no spaces.

Example:

@font-face {
    font-family: myFancyFont;
    src: url(fonts/caviardreams.ttf);
}

h1 {
    font-family: myFancyFont;
}

To see an interactive example, view: https://www.w3schools.com/css/tryit.asp?filename=trycss3_font-face_rule

Since @font-face deals with fonts you have on your system, it is helpful to know about the different font formats available

1.  Font Formats

There are several different font formats you can use on the web.  The most common include:

a)  TrueType Fonts (TTF)

TrueType is the font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.  TrueType files end in ttf

b)  OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts end in .otf

c)  The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation.

WOFF is an OpenType or TrueType font with compression and additional metadata.   The compression makes the font size smaller so it can easily be distributed over a network with bandwidth constraints.

d)  The Web Open Font Format (WOFF 2.0)

Same as WOFF with better compression

e)  SVG Fonts/Shapes

SVG fonts allow you to use glyphs when displaying text  (glyphs are the fun characters and pictures that come with many fonts)

SVG fonts work with @font-face and CSS

f)  Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

H. Filters

Filters let you adjust how an image, background or border will look before it is displayed in a web page. You can use filters in place of editing an image.

Filter effects include:

The effects are similar to effects you can create in Photoshop. When applying them in CSS, you do not have to change the original image AND you can animate the effects! CSS also allows you to apply more than 1 effect.

Syntax: filter:effect1(setting) effect2(setting) effectn(setting);

Where the effect is blur, brightness, contrast etc and the setting is the amount you want applied which is either measured in pixels, digits or percentages.

Examples:

Original Filters Applied
grand traverse bay original

style="filter:grayscale(100%);"

grand traverse bay grayscale

style="filter:sepia() drop-shadow(4px 4px);"

grand traverse bay sepia

style="filter:blur(1px);"

grand traverse bay blur

style="filter:brightness(120%) saturate(25%);

grand traverse bay grayscale

Interactive Filters (practice adjusting settings to see what the filter does to the image).

grand traverse bay original

Grayscale(%): Sepia(%):
Saturate(%): Blur(px)
Brightness(%): Invert(%)
Opacity(%): Hue-Rotate(deg)
Drop-Shadow x-value: y-value:

IV.   Using 2D Transformations

CSS transformations use a set of CSS properties that apply linear transformations to HTML elements.  These transformations include:

Everything currently in a web page is a 2D object  (2D objects have a set height and width). 

There are two CSS properties that affect transforming objects:  transform-origin and transform.

A.  transform-origin property

By default the origin of an object is in the center.  The origin is basically the rotation point or transformation point of the object.  You can change the origin's location using the transform-origin property.

Syntax:  transform-origin: x-axis y-axis z-axis

values for x-axis include:  left, center, right, the length or a %

values for y-axis include:  left, center, right, the length or a %

values for z-axis are only used for 3D transformations and they include the length only

NOTE:  The default origin is 50% 50% 0  (this is the center of the object)

Example:

transform-origin:20% 40%;
transform: rotate(45deg);

transform-origin is often used with rotation as shown in the example above.  The interactive example below should help you better understand how transform-origin works :

Rotate the orange rectangle using the sliders. You can change the origin point on the x or y axis and you can also change the rotation.  The current settings are the default (rotation is 0 deg and the transform-origin is in the center of the rectangle).

Change transform
origin and
rotation

 

 

 

 

 

Rotate: transform: rotateY:(0deg);
X-axis: transform-origin: 50% 50%;
Y-axis:

 

B.  Transform property

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.  It basically lets you change the shape, size and position of an object.

Syntax:  transform:name(values);

There is a long list of names(values) that can be used including:

  1. translate(x,y) - defines a 2D translation
  2. translate3d(x,y,z) - defines a 3D translation
  3. translateX(x) - only uses a value from the X-axis  NOTE: This can be used to move an object horizontally.
  4. translateY(y) - only uses a value from the Y-axis  NOTE:  this can be used to move an object vertically
  5. translateZ(z) - only uses a value from the Z-axis  NOTE:  this can be used to change the depth of an object
  6. scale(x,y) - changes the height and width of an object
  7. scale3d(x,y,z) - changes height, width and depth of an object
  8. scaleX(x) - changes only the width
  9. scaleY(y) - changes only the height
  10. scaleZ(z) - changes only the depth
  11. rotate(angle) - defines a 2d rotation
  12. rotate3d(x,y,z,angle)
  13. rotateX(angle) - used in a 3d rotation, changes the x-axis
  14. rotateY(angle) - used in a 3d rotation, changes the y-axis
  15. rotateZ(angle) - used in a 3d rotation, changes the z-axis
  16. skew(x-angle, y-angle) - defines a 2D skew transformation along the x and y axis
  17. skewX(angle) - defines a 2D skew along the x-axis
  18. skewY(angle) - defines a 2D skew along the y-axis
  19. perspective(n) - defines a perspective view for a 3D transformed element
  20. maxtrix(scaleX(), skewY(), skewX(),scaleY(), translateX(), translateY()) - matrix lets you apply more than 1 transformation.

NOTE:  When giving a value for an angle, you need to insert the number followed by deg  Example:   20deg

Example using transform:rotate(#deg):

 

Help - I am stuck in a box that is rotated 30 degrees!

 

Code used to create the example:

<div style="width:200px; height:100px;background-color:peachpuff;transform:rotate(30deg);">Help - I am stuck in a box that is rotated 30 degrees!</div>

Example using translate(x,y)

Original Position of the box
The new position of the box after transform:
translate(300px,-10px)

 

Here's the code used to create the example:

<div style="width:200px; height:100px; background-color:goldenrod;">Original Position of the box</div>
<div style="width:200px; height:100px;background-color:goldenrod;transform:translate(300px,-10px);">The new position of the box after transform:<br/>translate(300px,-10px)</div>

 Example using transform:skew(x,y);

Original Position of the box

 

The new position of the box after transform:
skew(5deg,10deg)

Here's the code used to create the example:

<div style="width:200px; height:100px; background-color:orange;">Original Position of the box</div>
<p>&nbsp;</p>
<div style="width:200px; height:100px;background-color:orange;transform:skew(5deg,10deg);">The new position of the box after transform:<br/>skew(5deg,10deg)</div>

To see interactive examples, view:


Translate: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_translate

Rotate:   https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_rotate

Scale (increase):  https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_scale

Scale (decrease): https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_scale2

Skew():  https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skew

SkewX(): https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skewx

SkewY(): https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skewy

Matrix: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_matrix1

V Using 3D Transformations

A.  perspective property

Traditional 2D objects have x and y positioning.  A 3D object uses x and y positioning and it also requires perspective. 

The perspective CSS property adjusts the z value to give the object depth.  You can think of it as the distance from the viewer to the object.   The greater the value, the further away the object will look. 

perspective:2000px applies a subtle effect and makes the image look further away. 

perspective:100px creates a more dramatic 3D effect and makes the object look quite large.


To see an interactive example of what it looks like when perspective is changed, go to:  changing-perspective.html    You should be able to see that the smaller perspective settings apply larger effects.

B.  perspective-origin property

This property affects the position of the viewer in relation to the 3D object.  By default, the perspective is centered on the viewer (perspective-origin:50% 50%;  is the default.)

There may be times when you want to change this position. To see an interactive example of a box with different perspective-origin settings, go to:  interactive-perspective-origin-example.html

C transform property

3D transform properties are the same as 2D except, you have the Z dimension in addition to the X and Y dimensions.  You can individually manipulate X, Y and Z or you can use one of the 3d properties that lets you adjust all 3 at the same time.

a)  transform:scale

Scale affects the size.  You can individually modify X, Y or Z.  You can also modify all 3.

b)  transform:translate

3D translate moves objects along the x, y and z planes.  You can move in x only, y only or z only.  In addition, you can adjust all 3 using the 3d property.

c) transform:rotate

This property also lets you change the rotation of each axis individually or all 3 at the same time.

To see an interactive example, view:  interactive-3d-transformations-all-in-one.html

D.  transform-style property

The transform-style property specifies how nested elements are rendered in 3D space and it must be used with the transform property.  When dealing with 3d objects, you should set this property to:  transform-style:preserve3d;

VI.  CSS 3 Transitions

Transitions are effects that can display when you are changing from one style to another (kind of like slide transitions in PowerPoint).

There are several transition properties you can use: transition, transition-delay, transition-duration, transition-property and transition-timing-function.  We will cover a few of them so you can get a feel for what they do.

Regardless of the transition property you use, all of the transitions require two values:

1.  the property you want to add an effect to

2.  the duration of the effect

A.  transition property

This is probably the one you will use most often.  You can use it to gradually modify shapes, rotations etc.

Syntax:  transition: property  duration;

The property is the feature you want to modify

The duration is the amount of time (usually in seconds)

Example:

transition:width 2s;

The transition command with the property and duration goes into the object you want to change (in our examples, we have been using a box.  You would need the transition:width 2s; property in the same id  or selector you are defining the box in)

Example:

div {
    width: 100px;
    height: 100px;
    background: orange;
    transition: width 2s;
}

The amount you want the object to change by needs to be in another CSS selector and it needs to be activated somehow.  We can use the hover state to activate the transition change.

Example:

div:hover {
    width: 300px;   /* this is the width we will be changing to and the transition will make the change occur over a 2 second time frame */
}

To see the example live, view:  transition-width.html  (to see the code, right click on the page and select View Page Source)

You can apply a gradual transitions to width or height.  You can also apply it to the transform commands (rotate, translate and scale).

<style>
div {
    margin-left:100px;
    width: 100px;
    height: 100px;
    background: orange;
   transition: transform 2s;
}
div:hover {
    transform: rotate(180deg);
}
</style>

To see the example live, view:  transition-transform.html

Finally, you can apply it to width, height and transform all at the same time!

Here's the code:

<style>
div {
    margin-left:100px;
    margin-top:50px;
    width: 100px;
    height: 100px;
    background: lightgreen;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
}
</style>
</head>
<body>

<div>Point at the box to see it spin while the size increases!</div>

To see the example live, view:  multiple-transitions.html

B.  transition-duration and transition-property

These two properties do the same thing that transition does. 

Instead of coding: 

transition: width  2s;

You would need to code:

transition-property: width;
transition-duration: 2s;

C.  transition-delay

Specifies when the transition will start.  It must be used with other transition properties such as transition or transition duration and transition-property.

Syntax:  transition-delay: time in seconds

Example:

transition-delay:10s;

D.  transition-timing-function property

This property can make the transition slower or faster  (ease in or ease out) .

Syntax:  transition-timing-function: type;

Type can be:

  1. ease (default) - specifies a transition effect with a slow start, faster in the middle and a slow end.
  2. linear - specifies a transition effect with the same speed from start to end
  3. ease-in  - the transition starts off slow and gets faster.
  4. ease-out  - the transition starts off fast and ends slower
  5. ease-in-out  - the transition starts slow in the beginning and end.
  6. steps(int,start|end) - steps specifies an interval for the transition.  start or end are optional - they specify the point the change occurs.
  7. step-start - assumes 1 for the interval and the change occurs at the beginning
  8. step-end - assumes 1 for the interval and the change occurs at the end
  9. cubic-bezier(n,n,n,n)  - you can define your own timing (possible values are from 0 to 1)

Example:

<style>
div
{
    width:100px;
    height:100px;
    background:lightblue;
    transition:width 2s;
    transition-timing-function:ease-in;
}

div:hover
{
    width:300px;
}

</style>
<body>
<p>Hover over the div element above, to see the transition effect.</p>
<div></div>

To see an example, of the code shown above view: transition-timing-function.html

To see an interactive example, go to: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-timing-function2

VII.  CSS 3 Animations

CSS 3 animation lets you animate your HTML elements (such as article, main, section, h1 and span) without JavaScript or Flash.

All current browsers support CSS 3 animation; however, older browsers do not so if you believe users may have older browsers, you need to prefix commands.

When you create animation, you need to define the @keyframes rule which specifies what you are going to animate and the intervals the animation should take place at.  Next, you need to add the animation-name and the animation-duration properties to the element you want to animate.

1  @keyframes property

@ keyframes is required for animation.  It gradually changes one set of CSS styles into another.  During a single animation, you can change the style many times.

There are two techniques you can use to specify a change in animation:

Method 1, using from and to: 

If you want to change from one style to another, this is a good method to use.

Syntax: @keyframes animationname {
    from{ original css styling}
    to {new css styling}
}

W3C Example:

@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

To see this online, view: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes

Method 2, using %  ( 0% is the beginning and 100% is the end):

Syntax: @keyframes animationname {
    0%  {original css styling}
    25% {new css styling}
    50% {new css styling}
    75% {new css styling}
    100%{final css styling}
}

This method is good if you want total control over how the styling transitions from start to end.

W3C Example:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

To see this online, view:  http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2

Here's another W3C example showing how multiple css styles are modified:

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

To see this online, view:  http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes3

Here's another example that is similar, but there is more control over the animation states:

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

To see this online, view:  http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes4

To implement the animation specified in @keyframes, you need to place the animation name and duration in an element's css.  The animation property lets you specify the name and duration using one property.  You can also specify them separately using the animation-name and animation-duration properties

2.  animation property

The animation property is used to specify the name of the animation you want to use which connects the selector to the keyframes AND it is used to specify how long the animation should play.

Syntax:  animation:name duration (in seconds)

Example:  animation:myfirst 5s;

W3C Coding Example:

div {
    width: 100px;
    height: 100px;
    background: red;
    animation: myfirst 5s;
}

/* Standard syntax */
@keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

The element that includes the animation rule is the one that will be animated.  In the example above, the div element is the one that will be animated.

To see this live, view: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1

There is an alternate method of giving the animation a name and duration that involves using two separate properties:

a)   animation-name property

Syntax:  animation-name: name;

Example:  animation:myfirst; 

b)   animation-duration property

Syntax:  animation-duration: #seconds

Example:  animation-duration:2s;

Using these two properties accomplishes the same thing as simply using the animation property by itself.

3.  animation-delay property

Specifies when the animation will start

Syntax: animation-delay: #seconds;

Example:   animation-delay: 2s;

4.  animation-iteration-count property

Indicates the number of times the animation should play

Syntax: animation-iteration-count: #;

Example:  animation-iteration-count:3; 

5.  animation-direction property

Defines the direction the animation should play (reverse or regular).

Syntax:animation-direction:value;

Where value can be:  normal (default),  reverse, alternate (play normal the first time, third time, fifth time etc and play in reverse, the second time, fourth time, sixth time etc).

6   animation-timing-function property

Specifies the speed curve of the animation. 

Syntax: animation-timing-function: value;

Where value can be:

linear - animation has same speed

ease -  default, animation starts slow, is fast in the middle and ends slow.

ease-in -  starts slow

ease-out - ends slow

ease-in-out  - slow start and slow end

cubic-bezier(n,n,n,n) - define your own values from 0-1 to control speed

Example #1 from W3C:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
   animation: mymove 5s infinite;
}

    #div1 {animation-timing-function: linear;}
    #div2 {animation-timing-function: ease;}
    #div3 {animation-timing-function: ease-in;}
    #div4 {animation-timing-function: ease-out;}
    #div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

To see it live:  http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function2

To see another example, view: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function3

7.  animation-fill-mode property

By default, CSS animation plays from the first keyframe to the last keyframe and then the element goes back to it's original position.  If you want the element to remain at the poosition specified by the last keyframe, you can use the animation-fill-mode property to specify that behavior.

Syntax: animation-fill-mode: value;

Where value can be: 

none - no animation is applied before or after

forwards - after the animation ends, the properties applied will remain in effect (the element will remain at the position specified by the last keyframe)

backwards - animation is applied from keyframe 1 forward

both - animation is applied forward and backward (the element will remain at the position specified by the last keyframe)

The best way to understand what this does is to see an example, please view:  animation-fill.html    The boxes will move horizontally.  After the animation, their final location is dependent upon the animation-fill-mode property.

8. animation-play-state

Specifies whether the animation is running or paused.

Syntax:  animation-play-state: paused or running;

W3C Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    /* Standard syntax */
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

/* Standard syntax */
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

To see this play live, go to: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4

VIII CSS User Interface

There are several new commands that enhance the user interface. We will be looking at 3 of the more popular (and useful) interface commands: box-sizing, outline-offset and resize. Additional commands deal with keyboard command arrows and navigation (they are beyond the scope of what we do in this course).

1. box-sizing

box-sizing includes the padding and border in the element’s total width and height (normally they are not included and you have to add them to the content’s width to get the total width/height) Keep in mind, when using box-sizing, you still have to add in margins because that isn’t included, but adding in margins is easier than adding content+padding+border+margins.

Syntax: box-sizing:value;

Where value can be:

To see the property work live, view: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing2  Try changing box-sizing to content-box and then back to border-box You should see the boxes wrap when set to content box because the border and padding are not included in the size, so they are added in making the boxes wider than before.

2. resize

Allows the user to resize containers vertically, horizontally or both ways.  If you think your content may not show up, you can specify overflow:auto AND you can also turn on resize allowing the user to resize the container and view all the information.

Syntax: resize:value;

Where value can be:

To see a live example, view: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize_height  Try changing the resize value to both, horizontal and none and see what happens.

3. outline-offset

This property puts space between the outline and the border (or edge) of an element. Outlines and borders are not the same thing.

Outlines have three unique characteristics:

To see a live example, view: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset   Try adjusting the number of pixels for the offset to see what it does.