Scribd
Upload
41 views30 pages

Animation

The document discusses CSS3 transitions, transforms, animations, and filters. It covers properties for transitions like transition, transition-property, transition-duration, and transition-timing-function. It also discusses 2D transforms including rotate, scale, skew, and translate. The document provides examples of transitions on hover and for an accordion, and examples applying different transforms to images.

Uploaded by

nimrabari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
41 views30 pages

Animation

The document discusses CSS3 transitions, transforms, animations, and filters. It covers properties for transitions like transition, transition-property, transition-duration, and transition-timing-function. It also discusses 2D transforms including rotate, scale, skew, and translate. The document provides examples of transitions on hover and for an accordion, and examples applying different transforms to images.

Uploaded by

nimrabari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Chapter 14

How to use CSS3


transitions, transforms,
animations, and filters

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 1
C14
Objectives
Applied
1. Use any of the properties presented in this chapter for working
with transitions, transforms, animations, and filters.
Knowledge
1. Explain how a transition effects the way that a change is applied
to an element.
2. Explain what a timing function is and how it affects a transition or
animation.
3. Explain how the rotate, scale, skew, and translate transforms
along with the transform origin effect an element.
4. Describe the function of the @keyframes selector rule for an
animation and two ways it can be coded.
5. Describe what you can do with filters and when they’re applied.
Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 2
C14
Properties for working with transitions
 transition (shortcut function for the following)
 transition-property (CSS properties, use commas to separate)
 transition-duration (seconds or milliseconds to take)
 transition-timing-function (speed curve function)
 transition-delay (seconds or milliseconds before firing off)

The syntax for the shorthand transition property


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

Available speed curve functions


 ease
 linear
 ease-in
 ease-out
 ease-in-out
 cubic-bezier
Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 3
C14
A transition that occurs when the mouse hovers
over a heading
Before the transition

During the transition

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 4
C14
The HTML for the element that will be transitioned
<h1>Hover over this heading to see its transition</h1>

The CSS for this two-property transition


h1 { font-size: 120%;
color: blue;
transition: font-size 2s ease-out 1s,
color 2s ease-in 1s; }
h1:hover {
cursor: pointer;
font-size: 180%;
color: red; }

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 5
C14
A transition for one property
h1 { font-size: 120%;
transition: font-size 2s ease-out;
-webkit-transition: font-size 2s ease-out; }
h1:hover { font-size: 180%; }

A transition for all properties


transition: all 2s ease-out 1s

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 6
C14
An accordion created with CSS3 transitions

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 7
C14
The HTML for the accordion
<h1>jQuery FAQs</h1>
<div id="accordion">
<h3><a href="#Q1">What is jQuery?</a></h3>
<div id="Q1">Contents for first panel</div>
<h3><a href="#Q2">Why is jQuery becoming so
popular?</a></h3>
<div id="Q2">Contents for second panel</div>
<h3><a href="#Q3">Which is harder to learn: ...?</a>
</h3>
<div id="Q3">Contents for third panel</div>
</div>

The CSS for the transitions


#accordion div {
overflow: hidden;
height: 0;
transition: height 2s ease-in-out;
-webkit-transition: height 2s ease-in-out;
}
#accordion div:target { height: 120px; }
Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 8
C14
Properties for working with 2D transforms
 transform (Applies one or more transform methods to the element)
 transform-origin (Changes the default origin point.)
o left
o center
o right
o top
o center
o bottom
o top left
o bottom right
o …

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 9
C14
Methods for 2D transforms
 rotate(angle)
 rotateX(angle)
 rotateY(angle)
 scaleX(value)
 scaleY(value)
 scale(x-value,y-value)
 skewX(angle)
 skewY(angle)
 skew(x-angle,y-angle)
 translateX(value)
 translateY(value)
 translate(x-value,y-value)
 matrix(a,b,c,d,e,f)

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 10
C14
An image with a right origin that’s rotated right

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 11
C14
The HTML for the images
<p><img src="images/01.jpg" >
<img src="images/01.jpg" class="image1">
</p>

The CSS for the transform


.image1 {
transition: 2s; }
.image1:hover {
transform: rotateY(180deg);
transform-origin: right; }

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 12
C14
Images with 8 different transforms applied

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 13
C14
The HTML for the images
<ul>
<li><p>Matrix</p>
<img src="images/01.jpg" class="image1"></li>
<li><p>Rotate</p>
<img src="images/02.jpg" class="image2"></li>
<li><p>ScaleX</p>
<img src="images/03.jpg" class="image3"></li>
<li><p>ScaleY</p>
<img src="images/04.jpg" class="image4"></li>
<li><p>SkewX</p>
<img src="images/05.jpg" class="image5"></li>
<li><p>SkewY</p>
<img src="images/06.jpg" class="image6"></li>
<li><p>TranslateX</p>
<img src="images/07.jpg" class="image7"></li>
<li><p>TranslateY</p>
<img src="images/08.jpg" class="image8"></li>
</ul>

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 14
C14
The CSS for the 2D transforms
.image1 {transform: matrix(0.5,0.5,-0.5,1,0,0);}
.image2 {transform: rotate(20deg);}
.image3 {transform: scaleX(1.4);}
.image4 {transform: scaleY(1.4);}
.image5 {transform: skewX(-20deg);}
.image6 {transform: skewY(-30deg);}
.image7 {transform: translateX(30px);}
.image8 {transform: translateY(20px);}

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 15
C14
Properties for working with animations
 animation (shortcut for the following)
 animation-name (name of associated @keyframes rule)
 animation-duration (seconds or milliseconds the animation takes)
 animation-delay (seconds or milliseconds before animation starts)
 animation-iteration-count (infinite, or number of animations)
 animation-timing-function (speed curve of animation)
 animation-direction (normal, reverse, or alternate to set direction)

The syntax for the shorthand animation property


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

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 16
C14
A simple animation that moves a heading
and changes its color
Starting in blue with a left margin of 20%

Ending in red with a left margin of 60%

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 17
C14
The HTML for the heading
<h1>This text will animate.</h1>

The CSS for the animation


h1 {animation: moveright 3s 2s infinite ease-in-out
alternate; }
@keyframes moveright {
from { margin-left: 20%;
color: blue; }
to { margin-left: 60%;
color: red; }
}

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 18
C14
A slide show animation with captions

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 19
C14
The HTML for an unordered list
that contains the images and captions
<ul>
<li>
<h2>Front of Building</h2>
<img src="images/01.jpg" alt="">
</li>
...
</ul>

The CSS for the ul and li elements


ul { list-style: none;
width: 500%;
position: relative; }
ul li { width: 20%;
float: left; }

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 20
C14
The CSS for the animation
ul { animation: slideshow 15s infinite alternate; }
@keyframes slideshow {
0% {left: 0%;}
10% {left: 0%;}
20% {left: -100%;}
30% {left: -100%;}
40% {left: -200%;}
50% {left: -200%;}
60% {left: -300%;}
70% {left: -300%;}
80% {left: -400%;}
90% {left: -400%;}
100% {left: -400%;}
}

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 21
C14
The syntax for adding a filter to an element
filter: filtermethod(value);

The filter methods


 blur(value)
 brightness(value)
 contrast(value)
 drop-shadow(values)
 grayscale(value)
 hue-rotate(angle)
 invert(value)
 opacity(value)
 saturate(value)
 sepia(value)

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 22
C14
An image before and after its colors are inverted

The HTML for the images


<li>Original<br><img src="images/01.jpg" alt=""></li>
<li>Inverted<br><img src="images/01.jpg" class="image1"
alt=""></li>

The CSS for the filter


.image1:hover { filter: invert(.80); }
Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 23
C14
Different filters applied to an image in Chrome

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 24
C14
The HTML for the images
<ul>
<li>Blur<br> <img src="images/01.jpg" class="image1"
alt=""></li>
<li>Brightness<br> <img src="images/01.jpg" class="image2"
alt=""></li>
<li>Contrast<br> <img src="images/01.jpg" class="image3"
alt=""></li>
<li>Drop Shadow<br> <img src="images/01.jpg" class="image4"
alt=""></li>
<li>Grayscale<br> <img src="images/01.jpg" class="image5"
alt=""></li>
<li>Hue Rotate<br> <img src="images/01.jpg" class="image6"
alt=""></li>
<li>Invert<br> <img src="images/01.jpg" class="image7"
alt=""></li>
<li>Opacity<br> <img src="images/01.jpg" class="image8"
alt=""></li>
<li>Saturate<br> <img src="images/01.jpg" class="image9"
alt=""></li>
<li>Sepia/blur<br> <img src="images/01.jpg" class="image10"
alt=""></li>
</ul>

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 25
C14
The CSS for the filters
.image1 { filter: blur(2px); }
.image2 { filter: brightness(50%); }
.image3 { filter: contrast(50%);}
.image4 { filter: drop-shadow(2px 2px 5px #333); }
.image5 { filter: grayscale(50%); }
.image6 { filter: hue-rotate(90deg); }
.image7 { filter: invert(.8); }
.image8 { filter: opacity(.50); }
.image9 { filter: saturate(30%); }
.image10{ filter: sepia(100%) blur(1px); }

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 26
C14
Exercise 14-1 Use transitions, transforms,
and animation

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 27
C14
Short 14-1 Use a CSS3 transition and transform

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 28
C14
Short 14-2 Use CSS3 animation

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 29
C14
Halloween 14 Add a transition and an animation

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 30
C14

You might also like