Code 201: Class 14 Google Teams, CSS Transforms, Transitions, and Animations

Read: “What Google Learned From Its Quest to Build the Perfect Team

Project Aristotle

Google set out to determine why some of its groups were very successful while others stumbled
Assembled a team of statisticians, organizational psychologists, sociologists, and engineers
The only pattern that emerged was the idea that group norms had a significant impact on group performance
Beneficial group norms
- All members speak roughly the same amount
- Members on average also had higher “average social sensitivity”
Other traits of successful teams
- Having clear goals and creating a culture of dependability

transform applied in two different forms 2D and 3D

transform: rotate(20deg) Rotates an element 20 degrees clockwise
transform: scale(.75) Scales an element to 75% of original
transform: translate(-10px, 25%) Shifts element 10px left and down 25%
transform: skew(5deg, -20deg) Distorts the element 5deg on the X axis and 20deg on the Y
transform-origin: 20px, 50px; Moves the center of rotation of an element 20 px right and 50px down from top left
transform: perspective Used to produce a 3D perspective similar to a vanishing point

For a transition to occur an element must hav a change in state, easiest way is with a pseudo-class

Pseudo-Classes
- :hover
- :focus
- :active
- :target
Most common transition related properties
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Animations
- @keyframes rule that sets up an animation

1; Fade in


.fade{opacity:0.5;}
.fade:hover{opacity:1;}

2; Change Color

.color:hover{background: #53a7ea;}

3; Grow and Shrink

.grow:hover{transform: scale(1.3);}

4; Rotate Element

.rotate:hover{transform:rotateZ(-30deg)}

5; Square to Circle

.circle:hover{border-radius:50%;}

6; 3D Shadow


.threed:hover{
  box-shadow:
    1px 1px #53a7ea,
    2px 2px #53a7ea,
    3px 3px #53a7ea,
    transform: translateX(-3px)
}

7; Swing *shakes and element back and forth

8; Inset Border

.border:hover{box-shadow: inset 0 0 0 25px #53a7ea}

A few different button style ideas

Example @keyframe of a ball bouncing

Example of keyframes and transforms to use as an animation for a 404 error

Example of a bounce animation