Save 37% off PRO during our Black Friday Sale! »

CSS3 Transforms Transitions and Animations

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
September 25, 2014

CSS3 Transforms Transitions and Animations

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

September 25, 2014
Tweet

Transcript

  1. CSS3 Transforms Transitions and Animations FEVR 25.9.2014 The Fab

  2. Transform The transform property applies a 2D or 3D transformation

    to an element. This property allows you to rotate, scale, move, skew, etc., elements.
  3. Transform: scale .square { height: 250px; width: 250px; background-color: orange;

    } becomes .square { height: 250px; width: 250px; background-color: orange; transform: scale(2); }
  4. Transform: rotate & skew .square { height: 250px; width: 250px;

    background-color: orange; transform: rotate(45deg); } .square { height: 250px; width: 250px; background-color: orange; transform: skew(45deg); }
  5. Transform: translate .square { height: 250px; width: 250px; background-color: orange;

    } becomes .square { height: 250px; width: 250px; background-color: orange; transform: translate(50px,50px); }
  6. Multiple Transforms .square { height: 250px; width: 250px; background-color: orange;

    } becomes .square { height: 250px; width: 250px; background-color: orange; transform: scale(2) rotate(45deg); }
  7. Transform origin the default transform origin is the dead center

    of an element, both 50% horizontally and 50% vertically. .square { transform: rotate(45deg); transform-origin: right top; } .square { transform: rotate(45deg); transform-origin: 100% 100%; }
  8. Transform 3D transform: translateZ(0); transform: translate3d(0,0,0); 3d transform uses GPU

    not CPU, so they are faster than 2d transform
  9. Transition CSS Transition allows property changes in CSS values to

    occur smoothly over a specified duration
  10. Anatomy of a Transition Keyframe 1 Keyframe 2 TWEEN

  11. Transition properties .square { //name of the CSS property the

    transition effect is for transition-property: width; //how many seconds or milliseconds a transition effect takes to complete transition-duration: 1s; //the speed curve of the transition effect transition-timing-function: linear; //when the transition effect will start transition-delay: 2s; } .square { transition: width 1s linear 2s; }
  12. Transition timing function LINEAR same speed from start to end

    EASE IN-OUT slow start and end EASE OUT slow end EASE IN slow start
  13. Multiple Transition .square { transition( background-color 1s ease 100ms, padding

    2s linear 0, transform 500ms ease-in 2s ) }
  14. Animation CSS Animation is like transitions, however we can specify

    the number of times it plays and whether it plays in a single direction or both directions They are named and can be reusable by more than one css rule
  15. Animation Example .square { height: 60px; width: 60px; animation: ‘moveit’

    4s ease 3 normal; } @-webkit-keyframes ‘moveit’ { 0% { width: 200px; background: red; opacity: 0.5 transform: scale(.5) rotate(15deg); } 50% { width: 300px; background: red; opacity: 1 transform: scale(1.3) rotate(15deg); } 100% { width: 500px; background: yellow; opacity: 0,5 transform: scale(1) rotate(0deg); } }
  16. Animation Values animation: ‘moveit’ 4s ease 3 normal; animation-name: ‘moveit’

    animation-duration: time animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out animation-iteration-count: number or infinite animation-direction: normal or alternate animation-delay: time animation-fill-mode: backwards/forwards/none/both //Configures what values are applied by the animation before and after it is executing.
  17. Transform + Transition + Animation = Award?