The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)
158 Chapter 13 Each of the m values is a number, but I can’t even begin to explain what each of them does! I suggest you read an ...
3D Transformations 159 The perspective and perspective-origin Properties Earlier in the chapter, I introduced the perspective() ...
160 Chapter 13 Figure 13-8: Different values for the perspective-origin property The Transformation Origin When explaining 2D tr ...
3D Transformations 161 right) example () has the same transformation origin on the x- and y-axes (set with keywords rather than ...
162 Chapter 13 Figure 13-10: Comparing the effects of different values for the transform-style property Showing or Hiding the Ba ...
3D Transformations 163 Figure 13-11: Demonstrating the backface-visibility property Summary The introduction of the third dimens ...
...
14 Tr ansiTions and animaTions We often think of web pages as having three layers: content (HTML), presenta- tion (CSS), and beh ...
166 Chapter 14 The difference between transitions and animations is that the former are implicit and the latter are declared. Th ...
Transitions and Animations 167 transition-property The first new property, transition-property, specifies which property (or pro ...
168 Chapter 14 transition-timing-function To control the manner in which an element transitions between states, you use the tran ...
Transitions and Animations 169 Output percentage Input percentage 0.5 0.5 1.0 1.0 P 0 P 1 P 2 P 3 Figure 14-1: An example of a c ...
170 Chapter 14 table 14-2: Comparing transition-timing-function Keywords with Their Equivalent Cubic Bézier Values Keyword Value ...
Transitions and Animations 171 1 2 3 4 Figure 14-2: A transition over four stepped intervals When an animation is displayed in s ...
172 Chapter 14 transition-delay The final property in the transition-* family is transition-delay, which sets the time when the ...
Transitions and Animations 173 This code seems like quite a lot to write for each transition. But, as with all of the other CSS ...
174 Chapter 14 As I’ve already mentioned, transitions act in reverse when the condi- tion that acts as a trigger is no longer be ...
Transitions and Animations 175 Figure 14-5 shows three stages of the transition: The first stage (left) shows the element pre-tr ...
176 Chapter 14 Keyframes Transition Transition Animation Figure 14-6: An animation with three keyframes and transitions between ...
Transitions and Animations 177 I hadn’t specified border-width again in the to keyframe (x), it would default to the inherited v ...
«
5
6
7
8
9
10
11
12
13
14
»
Free download pdf