reading-notes

Reading Notes for Codefellows!

---

Project maintained by AlanYHung Hosted on GitHub Pages — Theme by mattgraham

Code 201

Reading 14a

(All My Notes are attributed/sourced from the Resources directly preceding them.)

CSS Transforms

• New CSS3 Element for positioning and altering elements
• Has 2 different settings
  1. two-dimensional
  2. three-dimensional
• This property still does not have good browser support as of yet.

=========== Sample Code ===========

div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

Transitions & Animations

• CSS3 provides the ability to write behaviors for transitions and animations
• Transitions can alter the appearance or behavior of element based on user actions
  1. hover over
  2. focus on
  3. active
  4. targeted
• There are 8 simple but useful Transitions that will make your page look better
  1. Fade In
  2. Change Color
  3. Grow & Shrink
  4. Rotate Elements
  5. Square to Circle
  6. 3D Shadow
  7. Swing
  8. Inset Border
• Animations allow the appearance or behavior of element to be altered in multiple keyframes
• Here is sample code to show Animations used in 6 different ways on Buttons.
• Here is sample code to show Animations using Keyframes

=========== Sample Transition Code ===========

.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

=========== Sample Animation Code ===========

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}

404

• This code shows how you can combine Transform and Animation together to uniquely display the numbers 404

Bounce Animation

• Uses Transform and Animations to create a bouncing object

<– Back