CSS Fun

IDM 222 Web Authoring II 1

CSS3 Features

mdash transitionsmdash transformationsmdash animationsmdash filters

IDM 222 Web Authoring II 2

Transitions let you gradually change one or more of the CSS properties for an element over a specified period of time As youll see transitions let you provide features with CSS3 alone that would otherwise require JavaScript and jQueryHere are the five properties that can be used for transitions The shorthand transition property is the easiest to code The transition-property specifies the property(s) that the transition is for Use commas to separate multiple CSS properties The transition-duration specifies the seconds or milliseconds that the transition will take The transition-timing-function specifies the speed curve of the transition Values include ease linear ease-in ease-out ease-in-out and cubic-bezier The transition-delay specifies the seconds or milliseconds before the transition starts

CSS Transition Properties

transition shorthandtransition-property property(s) usedtransition-duration (milli)secondstransition-timing-function speed curvetransition-delay (milli)seconds before start

IDM 222 Web Authoring II 3

This is the CSS syntax for coding the shorthand transition property for any element In this first example we use a transition for the change in two properties that are applied to an a element color and font-size The rule set for the a selector sets the font-size to 100 and the color to blue Then the shorthand transition property provides two sets of values that are separated by commas

Transition Syntax

transition [property] [duration] [timing-function] [delay]

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 4

The first set of values is for the color property It says that the transition should take two seconds use the ease-in timing function (or speed curve) and wait one second before starting The second is for the font-size property and is basically the same other than the timing function here will ease-out

Transition Syntax Example

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 5

The rule set is followed by one for the hover pseudo-class for the a elementIt changes the color to red and the font-size to 120 This means when the user hovers the mouse over the anchor element the two values in the transition are changed As a result the transition takes place When the user stops hovering the transition returns to the original state

Transition Syntax Example Continued

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 6

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

CSS3 Features

mdash transitionsmdash transformationsmdash animationsmdash filters

IDM 222 Web Authoring II 2

Transitions let you gradually change one or more of the CSS properties for an element over a specified period of time As youll see transitions let you provide features with CSS3 alone that would otherwise require JavaScript and jQueryHere are the five properties that can be used for transitions The shorthand transition property is the easiest to code The transition-property specifies the property(s) that the transition is for Use commas to separate multiple CSS properties The transition-duration specifies the seconds or milliseconds that the transition will take The transition-timing-function specifies the speed curve of the transition Values include ease linear ease-in ease-out ease-in-out and cubic-bezier The transition-delay specifies the seconds or milliseconds before the transition starts

CSS Transition Properties

transition shorthandtransition-property property(s) usedtransition-duration (milli)secondstransition-timing-function speed curvetransition-delay (milli)seconds before start

IDM 222 Web Authoring II 3

This is the CSS syntax for coding the shorthand transition property for any element In this first example we use a transition for the change in two properties that are applied to an a element color and font-size The rule set for the a selector sets the font-size to 100 and the color to blue Then the shorthand transition property provides two sets of values that are separated by commas

Transition Syntax

transition [property] [duration] [timing-function] [delay]

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 4

The first set of values is for the color property It says that the transition should take two seconds use the ease-in timing function (or speed curve) and wait one second before starting The second is for the font-size property and is basically the same other than the timing function here will ease-out

Transition Syntax Example

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 5

The rule set is followed by one for the hover pseudo-class for the a elementIt changes the color to red and the font-size to 120 This means when the user hovers the mouse over the anchor element the two values in the transition are changed As a result the transition takes place When the user stops hovering the transition returns to the original state

Transition Syntax Example Continued

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 6

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

Transitions let you gradually change one or more of the CSS properties for an element over a specified period of time As youll see transitions let you provide features with CSS3 alone that would otherwise require JavaScript and jQueryHere are the five properties that can be used for transitions The shorthand transition property is the easiest to code The transition-property specifies the property(s) that the transition is for Use commas to separate multiple CSS properties The transition-duration specifies the seconds or milliseconds that the transition will take The transition-timing-function specifies the speed curve of the transition Values include ease linear ease-in ease-out ease-in-out and cubic-bezier The transition-delay specifies the seconds or milliseconds before the transition starts

CSS Transition Properties

transition shorthandtransition-property property(s) usedtransition-duration (milli)secondstransition-timing-function speed curvetransition-delay (milli)seconds before start

IDM 222 Web Authoring II 3

This is the CSS syntax for coding the shorthand transition property for any element In this first example we use a transition for the change in two properties that are applied to an a element color and font-size The rule set for the a selector sets the font-size to 100 and the color to blue Then the shorthand transition property provides two sets of values that are separated by commas

Transition Syntax

transition [property] [duration] [timing-function] [delay]

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 4

The first set of values is for the color property It says that the transition should take two seconds use the ease-in timing function (or speed curve) and wait one second before starting The second is for the font-size property and is basically the same other than the timing function here will ease-out

Transition Syntax Example

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 5

The rule set is followed by one for the hover pseudo-class for the a elementIt changes the color to red and the font-size to 120 This means when the user hovers the mouse over the anchor element the two values in the transition are changed As a result the transition takes place When the user stops hovering the transition returns to the original state

Transition Syntax Example Continued

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 6

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

This is the CSS syntax for coding the shorthand transition property for any element In this first example we use a transition for the change in two properties that are applied to an a element color and font-size The rule set for the a selector sets the font-size to 100 and the color to blue Then the shorthand transition property provides two sets of values that are separated by commas

Transition Syntax

transition [property] [duration] [timing-function] [delay]

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 4

The first set of values is for the color property It says that the transition should take two seconds use the ease-in timing function (or speed curve) and wait one second before starting The second is for the font-size property and is basically the same other than the timing function here will ease-out

Transition Syntax Example

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 5

The rule set is followed by one for the hover pseudo-class for the a elementIt changes the color to red and the font-size to 120 This means when the user hovers the mouse over the anchor element the two values in the transition are changed As a result the transition takes place When the user stops hovering the transition returns to the original state

Transition Syntax Example Continued

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 6

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

The first set of values is for the color property It says that the transition should take two seconds use the ease-in timing function (or speed curve) and wait one second before starting The second is for the font-size property and is basically the same other than the timing function here will ease-out

Transition Syntax Example

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 5

The rule set is followed by one for the hover pseudo-class for the a elementIt changes the color to red and the font-size to 120 This means when the user hovers the mouse over the anchor element the two values in the transition are changed As a result the transition takes place When the user stops hovering the transition returns to the original state

Transition Syntax Example Continued

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 6

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

The rule set is followed by one for the hover pseudo-class for the a elementIt changes the color to red and the font-size to 120 This means when the user hovers the mouse over the anchor element the two values in the transition are changed As a result the transition takes place When the user stops hovering the transition returns to the original state

Transition Syntax Example Continued

a color blue font-size 100 transition color 2s ease-in 1s font-size 2s ease-out 1sahover color red font-size 120

IDM 222 Web Authoring II 6

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

Lets test this in a browser (examplesanimations-transitions01-transitionshtml)

IDM 222 Web Authoring II 7

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

Whenever CSS3 techniques are being used its important to check current browser support information so you know where your techniques will work and where you have to work around lack of support or feature bugs

Great Can I Use Transitions

Can I Use It

IDM 222 Web Authoring II 8

Adding transitions is a great way to give your content more personality and provide the user a more enjoyable experience Transitions can also help with functionality and provide a simpler faster method of programming Lets look at another example (examplesanimations-transitions02-transitions-accordionhtml)

Practical Application

IDM 222 Web Authoring II 9

Transforms let your rotate scale skew and position HTML elements using CSS codeWhen you combine transforms with transitions you can create some interesting animations for your HTML elementsThe transform property lets you apply one or more transforms to an HTML element The transform-origin property lets you change the origin point for the transform Methods for 2D transformations include rotate scale skew translate and matrix (which let your do all the other methods in a single method)

CSS Transforms

2D Transforms

transform Applies transform methodstransform-origin Changes the default origin point

IDM 222 Web Authoring II 10

In this example there are two copies of the same image displayed side by side Then when the user hovers the mouse over the image on the right it is rotated 180 degrees As a result it looks like a mirror image of the image on the left (examplesanimations-transitions03-transformhtml)

2D Transform Example

ltpgt ltimg src=image01jpggtltimg src=image01jpg class=imagegtltpgt

image transition 2simagehover transform rotateY(180deg)

IDM 222 Web Authoring II 11

The best way to understand what these transforms can do is to experiment Lets look at some more examples of 2D transformations (open examplesanimations-transitions04-transform-galleryhtml)

Learning Transforms

IDM 222 Web Authoring II 12

3D Transforms

Examples

IDM 222 Web Authoring II 13

Transforms let your rotate scale skew and position HTML elements using CSS codeWhen you combine transforms with transitions you can create some interesting animations for your HTML elementsThe transform property lets you apply one or more transforms to an HTML element The transform-origin property lets you change the origin point for the transform Methods for 2D transformations include rotate scale skew translate and matrix (which let your do all the other methods in a single method)

CSS Transforms

2D Transforms

transform Applies transform methodstransform-origin Changes the default origin point

IDM 222 Web Authoring II 10

In this example there are two copies of the same image displayed side by side Then when the user hovers the mouse over the image on the right it is rotated 180 degrees As a result it looks like a mirror image of the image on the left (examplesanimations-transitions03-transformhtml)

2D Transform Example

ltpgt ltimg src=image01jpggtltimg src=image01jpg class=imagegtltpgt

image transition 2simagehover transform rotateY(180deg)

IDM 222 Web Authoring II 11

The best way to understand what these transforms can do is to experiment Lets look at some more examples of 2D transformations (open examplesanimations-transitions04-transform-galleryhtml)

Learning Transforms

IDM 222 Web Authoring II 12

3D Transforms

Examples

IDM 222 Web Authoring II 13

In this example there are two copies of the same image displayed side by side Then when the user hovers the mouse over the image on the right it is rotated 180 degrees As a result it looks like a mirror image of the image on the left (examplesanimations-transitions03-transformhtml)

2D Transform Example

ltpgt ltimg src=image01jpggtltimg src=image01jpg class=imagegtltpgt

image transition 2simagehover transform rotateY(180deg)

IDM 222 Web Authoring II 11

The best way to understand what these transforms can do is to experiment Lets look at some more examples of 2D transformations (open examplesanimations-transitions04-transform-galleryhtml)

Learning Transforms

IDM 222 Web Authoring II 12

3D Transforms

Examples

IDM 222 Web Authoring II 13

The best way to understand what these transforms can do is to experiment Lets look at some more examples of 2D transformations (open examplesanimations-transitions04-transform-galleryhtml)

Learning Transforms

IDM 222 Web Authoring II 12

3D Transforms

Examples

IDM 222 Web Authoring II 13

3D Transforms

Examples

IDM 222 Web Authoring II 13

Great Can I Use 3D Transforms

Can I Use It

IDM 222 Web Authoring II 14

CSS3 animations let you create frame-based animations that are similar to what you might create with a program like Flash They can be simple or complex and can animate more than one CSS property at the same time

CSS Animations

IDM 222 Web Authoring II 15

Of the six values that the animation property can include the values for duration delay and timing function work the same as they do for a transition The value for iteration count is the number of times the animation should be run And the value for direction is the direction in which the animation should be run The other value is the keyframes selector rule Within this rule you define the keyframes for the animation sequence

CSS Animation Properties

animation shorthandanimation-name name of the keyframes ruleanimation-duration (milli)seconds lengthanimation-delay (milli)seconds before startanimation-iteration-count repeat countanimation-timing-function speed of the curveanimation-direction normal reverse or alternate

IDM 222 Web Authoring II 16

This is the shorthand syntax for the property

CSS Animation Shorthand Syntax

h1 animation [name] [duration] [timing-function] [delay] [iteration-count] [direction]

IDM 222 Web Authoring II 17

In this example the color and left margin are changed over a duration of three seconds The result is the animation moves the heading from left to right and changes the color from blue to red The animation property for the h1 element points to moveright It also says each repetition should take three seconds the start of the animation should be delayed two seconds the animation should keep repeating using the ease-in-out speed curve and that the first animation will move left to right the second from right to left and so on

h1 animation moveright 3s ease-in-out 2s infinite alternate

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 18

The keyframes selector rule illustrates one way that the keyframes can be defined You use the from group to set the properties for the first frame and the to group to set the properties for the last frame The browser fills in the in-between frames for you This is known as tweening Lets build our example (examplesanimations-transitions05-animation-fadehtml)

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 19

For a finer level of control your keyframes can be setup using various percentage points Lets build another example (examplesanimations-transitions06-animationhtml)

CSS Animation Keyframes

keyframes myAnimation 0 50 100

IDM 222 Web Authoring II 20

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

Of the six values that the animation property can include the values for duration delay and timing function work the same as they do for a transition The value for iteration count is the number of times the animation should be run And the value for direction is the direction in which the animation should be run The other value is the keyframes selector rule Within this rule you define the keyframes for the animation sequence

CSS Animation Properties

animation shorthandanimation-name name of the keyframes ruleanimation-duration (milli)seconds lengthanimation-delay (milli)seconds before startanimation-iteration-count repeat countanimation-timing-function speed of the curveanimation-direction normal reverse or alternate

IDM 222 Web Authoring II 16

This is the shorthand syntax for the property

CSS Animation Shorthand Syntax

h1 animation [name] [duration] [timing-function] [delay] [iteration-count] [direction]

IDM 222 Web Authoring II 17

In this example the color and left margin are changed over a duration of three seconds The result is the animation moves the heading from left to right and changes the color from blue to red The animation property for the h1 element points to moveright It also says each repetition should take three seconds the start of the animation should be delayed two seconds the animation should keep repeating using the ease-in-out speed curve and that the first animation will move left to right the second from right to left and so on

h1 animation moveright 3s ease-in-out 2s infinite alternate

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 18

The keyframes selector rule illustrates one way that the keyframes can be defined You use the from group to set the properties for the first frame and the to group to set the properties for the last frame The browser fills in the in-between frames for you This is known as tweening Lets build our example (examplesanimations-transitions05-animation-fadehtml)

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 19

For a finer level of control your keyframes can be setup using various percentage points Lets build another example (examplesanimations-transitions06-animationhtml)

CSS Animation Keyframes

keyframes myAnimation 0 50 100

IDM 222 Web Authoring II 20

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

This is the shorthand syntax for the property

CSS Animation Shorthand Syntax

h1 animation [name] [duration] [timing-function] [delay] [iteration-count] [direction]

IDM 222 Web Authoring II 17

In this example the color and left margin are changed over a duration of three seconds The result is the animation moves the heading from left to right and changes the color from blue to red The animation property for the h1 element points to moveright It also says each repetition should take three seconds the start of the animation should be delayed two seconds the animation should keep repeating using the ease-in-out speed curve and that the first animation will move left to right the second from right to left and so on

h1 animation moveright 3s ease-in-out 2s infinite alternate

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 18

The keyframes selector rule illustrates one way that the keyframes can be defined You use the from group to set the properties for the first frame and the to group to set the properties for the last frame The browser fills in the in-between frames for you This is known as tweening Lets build our example (examplesanimations-transitions05-animation-fadehtml)

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 19

For a finer level of control your keyframes can be setup using various percentage points Lets build another example (examplesanimations-transitions06-animationhtml)

CSS Animation Keyframes

keyframes myAnimation 0 50 100

IDM 222 Web Authoring II 20

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

In this example the color and left margin are changed over a duration of three seconds The result is the animation moves the heading from left to right and changes the color from blue to red The animation property for the h1 element points to moveright It also says each repetition should take three seconds the start of the animation should be delayed two seconds the animation should keep repeating using the ease-in-out speed curve and that the first animation will move left to right the second from right to left and so on

h1 animation moveright 3s ease-in-out 2s infinite alternate

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 18

The keyframes selector rule illustrates one way that the keyframes can be defined You use the from group to set the properties for the first frame and the to group to set the properties for the last frame The browser fills in the in-between frames for you This is known as tweening Lets build our example (examplesanimations-transitions05-animation-fadehtml)

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 19

For a finer level of control your keyframes can be setup using various percentage points Lets build another example (examplesanimations-transitions06-animationhtml)

CSS Animation Keyframes

keyframes myAnimation 0 50 100

IDM 222 Web Authoring II 20

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

The keyframes selector rule illustrates one way that the keyframes can be defined You use the from group to set the properties for the first frame and the to group to set the properties for the last frame The browser fills in the in-between frames for you This is known as tweening Lets build our example (examplesanimations-transitions05-animation-fadehtml)

keyframes moveright from color blue margin-left 20 to color red margin-left 60

IDM 222 Web Authoring II 19

For a finer level of control your keyframes can be setup using various percentage points Lets build another example (examplesanimations-transitions06-animationhtml)

CSS Animation Keyframes

keyframes myAnimation 0 50 100

IDM 222 Web Authoring II 20

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

For a finer level of control your keyframes can be setup using various percentage points Lets build another example (examplesanimations-transitions06-animationhtml)

CSS Animation Keyframes

keyframes myAnimation 0 50 100

IDM 222 Web Authoring II 20

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

Animations can be simple or complex Lets look at some other examples online

CSS Animation Examples

mdash Solar Systemmdash Periodic Tablemdash Cat

IDM 222 Web Authoring II 21

Great Can I Use CSS Animations

Can I Use It

IDM 222 Web Authoring II 22

Filters let you change the appearance of images after theyve been loaded into the browser without changing the image files You can convert an image to grayscale or blur an imageThere are various filters available Well look at a couple examples here Research online to find a full list of available filters and the values that are accepted for each(0206-filtershtml)

CSS Filters

CSS Filters Syntax

image filter [filtermethod(value)]

IDM 222 Web Authoring II 23

Great Can I Use CSS Filters

Can I Use It

IDM 222 Web Authoring II 24

Great Can I Use CSS Filters

Can I Use It

IDM 222 Web Authoring II 24