Week 8
CSS animation and Git workflow for teams

# Animation v.s. Transition

Although you can do some pretty amazing things with CSS @keyframes animation, most often what you really need for adding small visual cues to improve UX is the humble transition property.

The transition property defines how the value of another css property will change, including the length of the transition, the timing-function (or easing), and the delay offset from other transition events.

Lets take the example of highlighting an element when we hover over it. We will change the color, increase the size and apply a drop-shadow to give the appearance the it lifted toward us.

.animation-target {
  width: 300px;
  height: 200px;
  background-color: blue;
  color: white;
  font-size: 2rem;
  text-align: center;
  line-height: 200px;
  border-radius: 0.25rem;
}

.animation-target:hover {
  transform: scale(1.02);
  background-color: rebeccapurple;
  box-shadow: 0 1px 5px 0 #666;
}

That give us the visual differentiation that we want, but the effect it a bit jumpy and unpleasant. Now apply a transition to smooth it out.

.animation-target {
  transition: all 0.3s;
}

Oh yea! So much better.

Have a read of the Using CSS transitions guide on MDN to see the full rage of possibilities.

# Keyframes

The @keyframes keyword in your CSS defines the property values at various points in the animation cycle – at a minimum the begining (0%) and ending (100%) points.

For example, lets set the background colour of an element to pulse between blue and pruple - maybe there is an important announcement and you are trying to get the user's attention. First define the keyframes.

@keyframes pulse {
  0%,
  100% {
    background-color: blue;
  }
  50% {
    background-color: rebeccapurple;
  }
}

Then apply the animation to an element.

.animation-target {
  animation: pulse 1s infinte;
}

# Transforms

Moving and resizing elements ...

Most commonly: translate, scale and rotate.

# Which properties can be animated?

You can find a comprehensive list of CSS properties which can be animated on the MDN documentation site. Most animatable properties are either colors or number values.

Curious about what other people are animating in their designs? Of course you are 😃

The folks at Google have collected a ton of anonymous browser usage statistics, and they have sifted through that data to create this CSS usage metrics > animated properties > stack rank chart

# Performance concerns

Jut because you can animate a CSS property, doesn't necessarily mean that you should. Luckily, you can get a lot of bang-for-the-buck with these highly performant properties:

• transform: translate()
• transform: scale()
• transform: rotate()
• opacity

There is a great article on High Performance Animations over at HTML5 Rocks.

# Further reading

Check out Sarah Drasner's article A Comparison of Animation Technologies

# Code examples

The code examples from the in-class demos are available from this GitHub classroom link.

# Extra credit assignment (EX 8-2) +2% on final grade

For those looking for an extra challenge, start with the login example and add an @keyframes animation to make the login form's logo move in an arc to the navbar's logo position before fading in the navbar. This should happen concurrently with the existing slide-fade animation on the login form.

The logo should move smoothly and be trigged by the change in the body.logged-in class being applied or removed. Make sure that we only see one instance of the logo on the screen at any given point.

This challenge assignment will be graded out of 10 points and could earn you up to 2 percent on your final grade.

# GitHub team tools

So far we have been using individual GitHib accounts. However, GitHub also supports organization accounts. I have created an orgnaization for our class and created sub-teams for each section.

Today we will look at how to use GitHub to manage our project task lists.

# EX 8-1

• Setup final project teams in GitHub.

• Assign team leader as 'maintainer'

• Setup weekly milestones

• Create two example tasks, linked to a milestone and assigned to at least one team member.