title

creator

CSS Transitions + Animations & jQuery Animations

name	class
Marc Wright, adapted for FEWD by Jamie King	FEWD14

CSS Transitions + Animations & jQuery Animations

Learning Objectives

Describe the importance of prefixing CSS properties
Describe what a CSS transform is, and give some examples
Describe what it means to transition or animate in CSS
List the types of properties that can / can't be animated
Use the transition declaration to change element properties on events
Describe the purpose and syntax of css keyframes
List and describe the purpose of the animation properties
Compare & contrast CSS Transitions and Animations
Create complex animations using CSS animation properties
Compare & contrast using CSS and JS for animations

Intro

Today we'll be covering 3 major topics:

CSS Transitions
CSS Transforms (2D)
CSS Animations
Vendor Prefixes

Transitions let us tell the browser how to smoothly change a property over time. For example, if the height of an element changes (due to a hover selector), we can tell the browser to change the height gradually over 1 second.

Transforms are a set of CSS properties that take an element and transform it's shape, e.g. rotating it, scaling it, skewing it, etc.

Animations are similar to transitions, in that they let us change properties over time, but they give us more control over how those changes happen.

For example, we have more control over how the animation repeats, we can change between multiple values at once, etc.

Vendor Prefixes - A prefix provides browser support for features that are not fully supported. If you are using chrome, you won't need to add a prefix to any of the properties used this lesson, but in general, it's a good idea to check Can I Use (http://www.caniuse.com) to see if you need to use prefixes to support most users/browsers. For CSS Animations, you should use prefixes to ensure support for Safari, IE, and other browsers.

Vendor Prefixes
-webkit- // Chrome/Safari
-moz- // Firefox
-o- // Opera
-ms // IE

The easiest way to do this is with prefix free (http://leaverou.github.io/prefixfree/).

Traditional Animation vs Computer Animation

In traditional (hand-drawn) animations, there were two kinds of animators
- Keyframe artist
  - Draws the main frames for the animation
- Inbetweener (tweener)
  - Fills in the frames between each keyframe, so it looks fluid
In computer animation, the developer acts as the keyframe artist, and the computer is the 'tweener'.

Create Basic Transitions in CSS

Transitions are a way to introduce timing to a given effect. In order to use any effect, you first need to define an initial state and a final state for the element that you would like to change.

.square {
    width: 200px;
    height: 200px;
    background: crimson; /* initial state */
}

.square:hover {
    background: darkBlue; /* final state */
}

Next, add a transition property:

transition-property
- transition-property: background, left, top, height;
- the name or names of the CSS properties that you would like to animate
- separate multiple properties by a comma
transition-duration
- transition-duration: 0.5s;
- specifies the duration of an animation
- can be specified in seconds or milliseconds(1000ms to 1s)
transition-timing-function
- transition-timing-function: ease;
- different options to explore the speed of the animation
  - ease
    - start slow
    - finish slow
    - smoother than ease-in-out
  - linear
    - applies the same speed from start to finish
  - ease-in
    - start slow
    - finish fast
  - ease-out
    - start fast
    - finish slow
  - ease-in-out
    - start slow
    - speed up in the middle
    - finish slow
  - cubic-bezier(n,n,n,n)
    - allows you to add variations to control the animation
    - it takes 4 parameters to indicate the curve on the x and y-axis, and 2 to indicate the handles
      - values range from 0 to 1
    - Cubic Bezier Playground
      - use to check your custom function against other timing functions
transition-delay
- transition-delay: 1s;
- allows you to delay the start of the animation

.square {
    width: 200px;
    height: 200px;
    background: crimson; /* initial state */
    transition-property: background;
    transition-duration: 5s; /* 1s is the default */
    transition-delay: 1s;
}

.square:hover {
    background: darkBlue; /* final state */
}

Transition Shorthand- allows your code to be shorter and more maintainable, especially if you are using vendor prefixes.

transition: <transition-property> <transition-duration> <timing-function> <transition-delay>
- Example: transition: transform 1s ease-in-out;

.square {
    width: 200px;
    height: 200px;
    background: crimson; /* initial state */
    transition: background-color 5s 1s; 
}

.square:hover {
    background: darkBlue; /* final state */
}

You Do!

Create a new pen on Codepen and create your own transition!

Create a 100px by 100px square box that has a background color of tomato.
Write a CSS rule that will transition your div from this initial state:

  div {
    background: tomato;
    width: 100px;
    height: 100px;
  }

Add to this final state... Write a CSS rule that changes the background color to turquoise when you hover over the element with your mouse

  div:hover {
    background: turquoise;
  }

Let's make that transition a little smoother:

  div {
    ...  
    transition-duration: 3s;
    transition-property: background; /* specify which property you want to transition */
    transition-timing-function: linear;
  }

CSS Transform

Transform allows elements styled in CSS to be transformed in a two-dimensional space.

The transform property allows you to change the shape, size and position. It has the following options...

2D Transform Methods

rotate(angle)
- transform: rotate(10deg);
- rotate an element clockwise or counter-clockwise via degrees(deg)
- will rotate clockwise by default
- if you use a negative value, it will rotate counter-clockwise
scale(x, y)
- transform: scale(1.1);
- allows you to increase/decrease the size of an element
- takes 2 parameters
  - 1st parameter(width)
  - 2nd parameter(height)
translate(x, y)
- transform: translateX(10px);
- move an element from its current position on the x and y-axis
- takes 2 parameters
  - 1st parameter- x-axis
    - will move horizontally
    - if you use a negative value, it will move to the right
  - 2nd parameter- y-axis
    - will move vertically
  - optional: use translateX() or translateY()
skew(x-angle, y-angle)
- transform: skewX(45deg);
- skew elements on the x and y-axis via degrees(deg)
- takes 2 parameters
  - 1st parameter- x-axis
    - will skew to the left by default
    - if you use a negative value, it will skew to the right
  - 2nd parameter- y-axis
- optional:
  - skewX(angle)
  - skewY(angle)

Syntax:

transform: method(parameter);

.square {
    width: 200px;
    height: 200px;
    background-color: crimson; /* initial state */
    transition: background-color 5s, transform 3s; 
}

.square:hover {
    width: 200px;
    height: 200px;
    background-color: darkBlue; /* final state */
    transform: skewX(20deg);
}

You can check out the transform options in the Dev Tools using autocomplete.

Transform Shorthand:

transform: scale(2) skewX(20deg) rotate(4deg);

Note: In order to add multiple transforms, it is separated by a space. To add multiple transitions, you separate them by commas. CSS is weird sometimes

3D Space

3D transformations extends CSS transform to allow elements in CSS to be transformed in three-dimensional space. You use the same values for the x and y-axis (horizontally and vertically). The z-axis allows us to transform front and back/extend out of the screen or 2D pane.

New CSS Properties

perspective
- distance between the viewer and the object
- if you ever took an art class, you probably discussed perspective
  - vanishing point- when all points converge on a single point
    - creates depth/ a 3D effect
- use in order to transform in 3D space
- default is (1000px)
- a higher value will feel far away (1500px)
- a lower value (400px) will make you feel closer to the object
- must be applied to the parent element
![Vanishing point](http://imgs.abduzeedo.com/files/articles/vanishing/vanishing-12.jpg)
perspective-origin
- defines where the element exists on the x and y-axis
- default 50% 50%, which represents the x and y-axis
transform-origin
- allows you to change the original x and y-positions
transform-style
- allows child elements to preserve 3D transformations
- flat (default)
- transform-style: preserve-3d; // will keep that style for the child elements
backface-visibility
- defines whether an element should be visible when it is facing the screen

3D Transform Methods

rotateX(angle) // transform clockwise
rotateY(angle) // transform counterclockwise
rotateZ(angle) // transform front and back
rotate 3D shorthand: rotate3d(x-axis, y-axis, z-axis, angle deg); rotate3d(1, 1, 1, 360deg);
translateX(x) // transform horizontally
translateY(y) // transform vertically
translateZ(z); // transform front and back
translate 3D shorthand: translate3d(x-axis, y-axis, z-axis); translate3d(50px, 50px, 75px);
scaleX(x) // transform width
scaleY(y) // transform height
scaleZ(z); // transform front and back
scale 3D shorthand: scalee3d(width, height, z-axis); translate3d(2, 2, 2); 3D- allows you to transform on the size and not on the movement

If you know the math, you can write your own transformation matrix

matrix(n,n,n,n,n,n)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Example of a matrix: http://periodic.famo.us/

Example of `translateX()`

.square {
  ...
  transform: translateX(0); /* start state */
  transition-property: background-color, transform; /* make sure to add transform here */    
}

.square:hover {
    ...
    transform: translateX(100px); /* end state */
}

You Do!

Rotate your box 45 degrees
Translate it along the X axis by 200px
Translate it along the Y axis by 200px
Try transform: translate(200px, 200px);
Scale the div so it is twice as big
Skew the div by 10 degrees
You can also combine multiple values: transform: translateX(200px) skew(30deg) scale(3);
transform: perspective(35px) translate3d(20px, 30px, 15px);
- x, y, z axis
- perspective is distance from the user
- when perspective === z-axis you're behind the element

Complex Animations with Multiple States

Transitions are great for going from one state to another, but sometimes you need more than an initial and a final state. Keyframes can be used to add color changes based on the percentage of visibility. A keyframe is similar to a function declaration, in that it starts with @keyframes, followed by the animation name, followed by curly braces. Inside of the curly braces, you add the keyframes-selector/percentage followed by a normal css rule.

Define a named animation with a set of keyframes. These are similar to the traditional animation "tweeners" that were mentioned earlier.

  @keyframes example {
    from { background-color: red; }
    to   { background-color: yellow; }
  }

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

Assign the animation to a rule and give it a duration

  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear;
  }

Additional properties:
- animation-duration
  - specifies how many seconds or milliseconds an animation takes to complete one cycle
  - mandatory in order for the animation to happen
  - the default is 0
- animation-timing-function
  - defines the speed curve of the animation
  - linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n)
- animation-iteration-count (can be set to infinite)
  - specifies the number of times an animation should run
- animation-direction
  - specifies whether an animation should play in reverse direction or alternate cycles
  - reverse
  - alternate
- animation-delay
  - specifies a delay for the start of an animation
- animation-play-state
  - specifies whether the animation is running or paused
  - paused
  - running
- animation-fill-mode
  - specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)

Animation Shorthand

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction>;

Animation Example

You Do

Apply the following to the animation we've been working on:

Try adding the following properties

    div {
        ...
        animation-iteration-count: inifinite;
        animation-direction: alternate;    
    }

Try adding another keyframe

    15% {
        background-color: orange;
        left: 400px; 
        top: 400px;
    }

3rd Party CSS Libraries

There are a lot of pre-built CSS libraries out there that are easy to include in your app. Here's an example: Top 9 Animation Libraries

Using jQuery for Animations

CSS Animations are easy and mostly compatible. They are often a good choice for basic animation needs. For anything more complex, such as animation that depends on user input, you will need to use Javascript. There are good libraries for animation (see above).

You Do

Take 5 minutes to read through these two links:

jQuery can be useful for animation because you can pass in a callback function and potentially chain methods together.

`fadeIn()`

jQuery has some simple animation methods like fadeIn() for example. The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible (fading effect).

Syntax
$(selector).fadeIn(speed,easing,callback);

speed- specifies the speed of the fading effect
- milliseconds
- slow
- fast
easing- specifies the speed of the element in different points of the animation. Default value is "swing"
- swing - moves slower at the beginning/end, but faster in the middle
- linear - moves in a constant speed
callback- a function to be executed after the fadeIn() method is completed

Let's try this in Codepen.io (make sure to include the jQuery library under Settings -> Quick Add).

html:

  <div id="box1">BOX 1</div>

css:

  #box1 {
		height: 100px;
		width: 100px;
		padding: 10px;
		position: relative;
		background-color: aqua;
  }

jQuery:

  $('#box1').fadeIn(3000).fadeOut(10000);

Here are some common jQuery effects you can use.

`animate()`

You can accomplish a lot of the CSS animation code from above using animate(). The jQuery animate() method is used to create custom animations.

Syntax
$(selector).animate({params},speed,callback);

params- required params parameter defines the CSS properties to be animated
speed- speed parameter specifies the duration of the effect.
- slow
- fast
- milliseconds
callback parameter- a function to be executed after the animation completes

Here is an example:

html:

  <div class="container">
    <div id="box1">BOX 1</div>
    <div id="box2">BOX 2</div>
  </div>
  <div class="controlButtons">
    <button type="button">Toggle</button>
  </div>

css:

  #box2 {
    height: 100px;
    width: 100px;
    padding: 10px;
    position: relative;
    background-color: mediumVioletRed;
  }

jQuery:

  $("button").click(function(){
    $("#box2").animate({
      height: 'toggle';
    }, 4000);
  });

animate() Example

Bonus

Look at the following examples, try to re-create them from scratch using as little starter code as possible.

Animated Buttons (Transitions and Animations)
Image Hover Effects (Transitions and Animations)
Solar System in CSS (Transitions and Animations)

king0120/CSS-and-jQuery-Animations

CSS Transitions + Animations & jQuery Animations

Learning Objectives

Intro

Traditional Animation vs Computer Animation

Create Basic Transitions in CSS

You Do!

CSS Transform

2D Transform Methods

3D Space

New CSS Properties

3D Transform Methods

Example of `translateX()`

You Do!

Complex Animations with Multiple States

You Do

3rd Party CSS Libraries

Using jQuery for Animations

You Do

`fadeIn()`

`animate()`

Bonus

Resources

king0120/CSS-and-jQuery-Animations

CSS Transitions + Animations & jQuery Animations

Learning Objectives

Intro

Traditional Animation vs Computer Animation

Create Basic Transitions in CSS

You Do!

CSS Transform

2D Transform Methods

3D Space

New CSS Properties

3D Transform Methods

Example of translateX()

You Do!

Complex Animations with Multiple States

You Do

3rd Party CSS Libraries

Using jQuery for Animations

You Do

fadeIn()

animate()

Bonus

Resources

Example of `translateX()`

`fadeIn()`

`animate()`