CSS3 Transforms Transitions and Animations

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?