Microsoft Official Course
Module 12
Animating the User Interface
Module Overview
Applying CSS Transitions
Transforming Elements
• Applying CSS Keyframe Animations
Lesson 1: Applying CSS Transitions
Applying Simple Transitions by Using CSS
Configuring Transitions
Detecting the End of a Transition
• Demonstration: Using CSS Transitions
Applying Simple Transitions by Using CSS
• A CSS3 transition enables you to define a
transition for one or more properties
• The browser interpolates between initial value and final value over
a specified duration
div {
width: 300px;
background-color: yellow;
transition: width 2s, background-color 3750ms;
}
div:hover {
width: 600px;
background-color: red;
}
Configuring Transitions
• You can configure transitions by using separate
properties:
transition-property Target property of the transition
transition-duration Duration of the transition
transition-timing-function Defines how the transition speed varies
transition-delay Delay before the transition starts
transition Shorthand notation for all properties
div {
width: 400px;
height: 60px;
transition-property: width, height;
transition-duration: 2s, 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
Detecting the End of a Transition
• When a transition has ended, it raises the
transitionend event on the target HTML element
• The event argument has propertyName and
elapsedTime properties
anElement.addEventListener("transitionend", onTransitionend, true);
function onTransitionend(e) {
var nameOfProperty = e.propertyName;
var elapsedTime = e.elapsedTime;
…
}
Lesson 2: Transforming Elements
Applying Transformations by Using CSS
Applying 2D Transformations
Demonstration: Performing 2D Transformations
Applying 3D Transformations
Defining Transitions for Transformations
• Demonstration: Performing 3D Transformations
Applying Transformations by Using CSS
Types of transformation supported by CSS:
• Translating
• Rotating
• Scaling
• Skewing
Applying 2D Transformations
To perform a 2D translation:
translate(tx, [ty], [tz]) translateX(tx) translateY(ty)
To perform a 2D scaling transformation:
To perform a 2D rotation:
scale(sx, [sy]) scaleX(sx)
To perform a 2D skew transformation:
Example
div.rotate1 {
rotate(angle) transform: rotate(10deg);
transform-origin: left top;
}
skew(anglex, [angley]) skewX(anglex) skewY(angley)
Applying 3D Transformations
To perform a 3D translation:
translate3d(tx, [ty], [tz]) translateZ(tZ)
To perform a 3D scaling transformation:
scale3d(sx, [sy], [sz]) scaleZ(sZ)
To perform a 3D rotation:
rotate3d(xnum, ynum, znum, angle) rotateZ(angle)
You must also specify a perspective:
• Use the perspective() function, or
• Specify perspective and perspective-origin properties
Defining Transitions for Transformations
You can define a transition for a transformation:
• Set the transform property on an element
• Set the transition property so that it defines a transition
for the transform property
<style>
#container {
transition: transform 5s;
}
#container:hover {
transform: rotate(90deg);
}
</style>
…
<div id="container">
…
</div>
Lesson 3: Applying CSS Keyframe Animations
Defining a Keyframe Animation
Configuring Keyframe Animation Properties
Starting a Keyframe Animation Programmatically
Handling Keyframe Events
Demonstration: Implementing KeyFrame
Animations
• Demonstration: Animating the User Interface
Defining a Keyframe Animation
• Define property values that apply at distinct points
during the animation
@keyframes name_of_animation {
0% { /* or from */
… properties to at the start of the animation …
}
50% {
… properties to apply after 50% of the animation …
}
100% { /* or to */
… properties to apply at the end of the animation …
}
}
Configuring Keyframe Animation Properties
• Apply the animation to a target element in a CSS
rule
CSS_rule_to_apply_animation {
animation-name: name_of_animation;
animation-duration: duration_of_animation;
…
}
• Keyframe animation properties:
• animation-name
• animation-duration
• animation-delay
• animation-timing-function
• animation-iteration-count
• animation-direction
Starting a Keyframe Animation Programmatically
• Common technique:
<style>
@keyframes ballmovement {
• Add a CSS ...
class to the }
target element
#ball.animate {
animation-name: ballmovement;
...
• Trigger the }
keyframe </style>
animation ...
<script>
based on the function startAnimation() {
CSS class var ball = document.getElementById("ball");
ball.classList.add("animate");
}
</script>
Handling Keyframe Events
Keyframe animations raise the following events:
• animationstart
• animationiteration
• animationend
The event-handler function receives an event
argument with the following properties:
• animationName
• elapsedTime
Lab: Animating the User Interface
Exercise 1: Applying CSS Transitions
• Exercise 2: Applying Keyframe Animations
Logon Information
• Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1
• User Name: Student
• Password: Pa$$w0rd
Estimated Time: 60 minutes
Lab Scenario
You have been asked to make the Contoso Conference web site more
engaging by adding some animation.
You decide to animate the Register link, displayed on the Home page.
When the user moves the mouse over this link, you will make it rotate
slightly to highlight it.
The Feedback page contains a form that enables an attendee to
provide their assessment of the conference and to make additional
comments. This information is submitted by the Feedback page to a
data-collection service. You have decided that you can make this page
more interesting by animating the stars as the user moves the mouse
over them, and by making the feedback form fly away when the user
submits their feedback.
Module Review and Takeaways
• Review Question(s)
