7. CSS3 Transformations and Animations

About this Tutorial

Objectives

Delegates will learn to develop applications using HTML5/CSS3 and JS. After completing this course, delegates will be able to:

  • Use Visual Studio 2012 effectively
  • Create commercial HTML5 Web Applications
  • Develop Websites that may use web sockets, animations and geolocation

Audience

This course has been designed primarily for programmers new to the .Net development platform. Delegates experience solely in Windows application development or earlier versions of HTML/CSS and JavaScript will also find the content beneficial.

Prerequisites

No previous experience in web programming is required. But any experience you do have in programming will help. Also no experience in browser IDE’s is required. But again any experience you do have with programming development environments will be a valuable.

Download Solutions

HTML tutorial


Overview

Estimated Time – 1 Hour

Not what you are looking? Try the next tutorial – Graphics with Canvas

  1. Overview of Transitions
    • CSS3 allows you to define transitions for property changes
      • E.g. when a user hovers over an element…
      • …increase the width over a period of 3 seconds
    • To define a transition
      • Set the transition property
      • Specify the property to vary, and the time span
    • Example (e.g. in IE10)
      • See Transitions/SimpleTransition.html
      • View code file.

        • #myPanel {
         width: 200px;
         transition: width 3s;
        }
        #myPanel:hover {
         width: 300px;
        }

  2. Overview of transformations
    • CSS3 supports 2D transforms (and 3D – see later)
      • Enables elements rendered by CSS to be transformed in 2D space
        transform: transformation-functions;
      • Applies a series of transformation functions to an element
      • E.g. matrix, translate, scale, rotate, skew
        transform-origin: horiz-pos vert-pos;
      • Establishes origin of transformation (default is center of element)
        • horiz-pos can be a length, percentage, or left / center / right
        • vert-pos can be a length, percentage, or top / center / bottom
    • Most browsers use vendor prefixes
      for these properties      , for example:
      -ms-transform:   translate(5px);
      -webkit-transform: translate(5px);
      -moz-transform:  translate(5px);
      -o-transform:   translate(5px);
  3. Overview of Keyframe Animations
    • CSS3 enables you to define keyframe animations
      • A series of rule-sets that specify property values at distinct stages of the animation
    • This allows you to implement complex UI effects
      • Previously would have required video, Flash, etc…

Lab 1: Transitions

Lab 1: Transitions
  1. Defining Multiple Transitions
    • The transition property can specify multiple transitions
      • Specify a comma separated list of property names and durations
    • Example (e.g. in IE10)
      • See Transitions/MultipleTransitions.html
      • View code file.

        • #myPanel {
         background-color: orange;
         width: 200px;
         height: 100px;
         transition: background-color 4250ms, width 1s, height 1s;
        }
        #myPanel:hover {
         background-color: yellow;
         width: 300px;
         height: 150px;
        }

  2. Setting Detailed Transition Properties
    • There are several detailed properties that you can set, to control every aspect of a transition…
      • transition-property
      • transition-duration
      • transition-timing-function
      • transition-delay
      • transition (shorthand property for the 4 properties above)
    • Example (e.g. in IE10) – See Transitions/DetailedTransition.html
    • View code file.
  3. Handling Transition Events
    • When a transition ends, a transitionend event occurs on the target element
      • Allows you to do something when the transition is complete, such as playing an animation
    • The following example shows how to handle this event
      • Note the properties available on the event object
        anElement.addEventListener("transitionend", onTransitionend, true);
        ...
        function onTransitionend(e) {
         alert(e.propertyName + " completed after elapsedTime " + e.elapsedTime);
        }
Lab
  1. In this lab, you’ll implement a web page that allows the user to apply transformations when viewing an image:
    • The web page, SimpleViewer.html, will allow the user to click buttons to rotate, translate, and scale the image.
    • View code file.
    • You will be working from the initial folder, there is also a folder named final with all the completed work that you can refer to if you get stuck. This can be downloaded from the top of the tutorial.
  2. Open a browser window and browse to SimpleViewer.html in the final folder. The web page displays an image enclosed inside a <div> element. The image is actually bigger than the <div>, and it has negative margin-left and margin-top CSS properties relative to the <div> element. We’ve defined some CSS properties to ensure the image is clipped to the <div> element when it is displayed on the web page.
  3. View code file.
  4. The web page has several buttons that allow the user to transform the image. Click each of the buttons to see the effects. Note the following points:
    • Each button applies a single transformation to the image (i.e. the transformations are not cumulative). For example, if you click Turn clockwise twice, the second click seems to have no effect because the image has already been rotated.
    • The transformation origin is the top-left corner of the image.
    • There’s a transition of 3 seconds for each transformation, for a smooth user experience.
  5. Now switch to the initial folder and open SimpleViewer.html in the text editor. The <body> of the web page contains the following elements:
  6. View code file.
    • A series of buttons, each of which applies a specific transformation. Each button has a data-description attribute that describes the purpose of the button, and a data-class-to-add attribute that specifies the CSS classes to apply to the image when that button is clicked.
    • A <div> element named myImageContainer. The <div> element contains the image to be transformed.
  7. Now go to the top of the web page and locate the <style> element. Note these CSS rules:
    • The #myImageContainer rule defines CSS properties for the <div> element. Note the overflow: hidden CSS property, which ensures any nested elements are hidden if they overflow the confines of the <div> element. This is how we ensure the image is clipped to the viewing region of the <div> element.
    • The #myImageContainer img rule defines CSS properties for the <img> element. Note the width and height are much larger than the <div> element, and the margin-left and margin-top are negative.
    • There are a series of empty CSS rules corresponding to the buttons on the web page. You’ll implement transformations in these CSS rules shortly.
  8. Now skim down and locate the onload() function in the <script> element. The function performs the following tasks:
    • Sets the label for each button, based on its data-description attribute.
    • Installs a click handler function for each button. The handler function gets the data-class-to-add attribute for the clicked button, and applies that CSS class to the image.
  9. Simple transformations – Its time for you to write some code, Implement transformations in the CSS rules as indicated by the TODO comments in the initial folder:
    T7P5 CSS3
  10. Make sure you also define vendor-specific transformations too (e.g. -ms-transform, -webkit-transform, etc.). Then open the initial version of SimpleViewer.html in the browser. Verify the image is transformed when you click each button. The transformations will be based on the centre of the image at the moment, and there is no smooth transition yet.
  11. For Example for 1a – .rotateClockwise – Clockwise rotation of 15 degrees
    rotateClockwise {
      -ms-transform:   rotate(15deg);
      -webkit-transform: rotate(15deg);
      -moz-transform:  rotate(15deg);
      -o-transform:   rotate(15deg);
      transform:     rotate(15deg);
    }

Lab 2: Transformations

Lab 2: Transformations
  1. Translations
    • To translate an element, use one of these functions:
      translate(tx, [ty])
      translateX(tx)
      translateY(ty)
    • tx
      • Horizontal translation to the left (-ve) or right (+ve)
      • Can be a length or a percentage
    • ty
      • Vertical translation up (-ve) or down (+ve)
      • an be a length or a percentage
      • If omitted in translate(), the value is 0
    • Examples – See Transforms\Translations.html
    • View code file.

      • T7P1 CSS3

  2. Scaling
    • To scale an element, use one of these functions:
      scale(sx, [sy])
      scaleX(sx)
      scaleY(sy)
    • sx
      • Horizontal scaling factor (1.0 = normal scale)
    • sy
      • Vertical scaling factor (1.0 = normal scale)
      • If omitted in scale(), value is same as sx
    • Examples – See Transforms\Scaling.html
    • View code file.

      • T7P2 CSS3

  3. Rotations
    • To rotate an element, use this function:
      rotate(angle)
    • angle
      • Rotation angle clockwise (+ve) or anticlockwise (-ve)
      • Can be degrees or radians
    • Examples – See Transforms\Rotations.html
    • View code file.

      • T7P3

  4. Skewing
    • To skew an element, use one of these functions:
      skew(ax, [ay])
      skewX(ax)
      skewY(ay)
    • ax
      • Skew angle about X axis, clockwise (-ve) or anticlockwise (+ve)
      • Can be degrees or radians
    • ay
      • Skew angle about Y axis, clockwise (-ve) or anticlockwise (+ve)
      • Can be degrees or radians
      • If omitted in skew(), the value is 0
    • Examples – See Transforms\Skewing.html
    • View code file.

      • T7P4

  5. 3D Transforms
    • CSS3 provides various 3D transformation functions; here is just a glimpse:
      translate3d(tx, [ty], [tz])
      translateZ(tz)
      scale3d(sx, [sy], [sz])
      scaleZ(sz)
    • You must also set a perspective
      • Use the perspective() function
      • Or specify perspective and perspective-origin properties
    • Example (e.g. in IE10)
Lab
  1. Setting the transformation origin – You are going to continue using SimpleViewer.html from the previous lab and are going to set the origin of the element
  2. View code file.
  3. Locate the .topLeftOrigin CSS rule. In this rule, set the transform-origin CSS property to the top-left corner of the target element. Make sure you also set the vendor-specific versions of transform-origin too:
    .topLeftOrigin {
      -ms-transform-origin: left top;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
    }
  4. In the browser, refresh SimpleViewer.html. Verify all the transformations are based on the top-left corner of the image (which is located outside the confines of the <div>).

Lab 3: Keyframe animations

Lab 3: Keyframe animations
  1. Defining a Keyframe Animation
    • Here’s a simple example of a keyframe animation – Illustrates syntax and helps you to understand the concepts:
      @keyframes myAnimation {
        0% {
          left: 0px;
          top: 0px;
          background-color: red;
        }
        33% {
          left: 100px;
          top: 160px;
        }
        66% {
          left: 200px;
          top:  0px;
        }
        100% {
          left: 300px;
          top: 160px;
          background-color: green;
        }
      }
  2. Applying a Keyframe Animation
    • To apply a keyframe animation to an element:
      • Set the animation-name property in a CSS style rule, to the name of a keyframe animation
    • Example
      • This CSS rule applies to an element whose id is someElement, when its class is animation0n
      • Note, there’s nothing special about a class named animationOn
  3. Triggering a Keyframe Animation
    • To trigger a keyframe animation on an element:
      • Write some JavaScript code that applies the appropriate CSS class in response to some user action
    • Example
      • This JavaScript function is triggered in response to some user action, such as a button-click, mouse-over, etc.
      • The function applies the animationOn class to the target element, which will trigger the animation!
        function startFunctionTriggeredBySomeUserAction() {
         var elem = document.getElementById("someElem");
         elem.classList.add("animationOn");
        }
  4. For a complete example of keyframe animations…
    • See KeyframeAnimations/Snooker.html
    • View code file.
    • This example works in IE10
Lab
  1. Defining a transition for a transformation – You are going to continue using SimpleViewer.html from the previous lab but this time will add in some transitions to smooth over the transformations
  2. Locate the #myImageContainer img rule and define a transition CSS property:
    • Transition target property: transform
    • Transition duration: 3s (i.e. 3 seconds)
    • Transition timing effect: ease-in-out
  3. Make sure you also set the vendor-specific versions of transition too. For example, set -ms-transition so that it targets the -ms-transform property, etc… Hence the end product should look like this:
    #myImageContainer img {
      width: 1800px;
      height: 1200px;
      margin-left: -400px;
      margin-top: -300px;
      -ms-transition: -ms-transform 3s ease-in-out;
      -webkit-transition: -webkit-transform 3s ease-in-out;
      -moz-transition: -moz-transform 3s ease-in-out;
      -o-transition: -o-transform 3s ease-in-out;
      transition: transform 3s ease-in-out;
    }
  4. Refresh SimpleViewer.html in the browser. Verify all the transformations are now applied smoothly over 3 seconds

 

Well done. You have completed the tutorial in the HTML5/CSS3/JS course. The next tutorial is

8. Graphics with Canvas


Back to beginning
Copyright © 2016 TalkIT®






If you liked this post, please comment with your suggestions to help others.
If you would like to see more content like this in the future, please fill-in our quick survey.
Scroll to Top