Reloading Linked Files (i.e., JavaScript, CSS external files)

• F5 or normal Reload reloads the current HTML page (not the linked external CSS/JavaScript files)
• Chrome: With Inspect aka Web Developer (reload icon has more options)
  • Shift-F5 Right^Click Hard Reload Menu Item (reload linked files),
  • Ctrl F5 empty cache and hard reload, to empty cashe (can clear cache in settings)
  • Web Developer "Application Tab" is the browser Application (cache access)

Class Site Designs...

• Rollover Alpha Liugi Scollo
• Rotate Links Daryl Jacobs (need to update to transform: translate( x, y );

Historically Opera has been best at supporting CSS, add Opera to my home computer - looks to still be true.
CSS3 Web-site generators will often generate specific code for each browser.

• css3maker.com - border-radius, transition, transform, etc - using this site but place transform after browser specific (rotations is CW starting at 0,-y)
• css3please.com - can modify CSS3 code and see changes in box, has transforms, transitions not covered in chapter, need to toggle transform rules
• text-book rcommended site westciv.com
• add Firefox Colorzilla add (color picker/eye dropper) and Ultimate CSS Gradient Generator - Chrome color picker
• CSS3 button generator
• DW Creative Cloud Transition Window --> CSS Transitions Panel (GUI best to use CSS3 generator)
• DW transform property well supported for code based auto completion

Transitions Historically

• dynamic GIFs
• Flash (but not supported mobile phones) WebASM?
• JavaScript - steep learning curve

transform : [ rotate | scale(x,y) | skew ]

• rotate - transform: rotate( 10deg);
• scale - transform: scale( X, Y );
• translate
• skewing (slanting) along veritical or horizonal axis

transform-style: flat|preserve-3d|initial|inherit; (flast is default)

transform:rotate( n° )

transform:scale(x,y)

transform:translate( x, y );

transform: skew( x axis translate by x °, y axis translation y ° gives a 3D out of page translation )

Mutiple transformation, transform: [ rotate | translate | scale | skew ] standard space separated

transform-origin: x% y%; axis of rotation default center of element

Transitions animation from CSS property set to next CSS property set

DW Window --> CSS Transition shows current transitions; clicking edit bring edit Transition

1. Before (target rule) (#transition1)
2. set transition property, duration, delay, easing with before rule
3. trigger - transition on "action"
   
4. #transition1: hover will have after target
   style rules

transtion : properties duration timing-function delay

• DW does this by default, they also add browser prefix #transition1
• transition: all 1s ease-in .5s;
• transition: all 1s;
• transition:background-color 1s;
• transition: color 1s, background-color 1s, border-color .5s 1s;

Animated Properties by w3c but let DW do it, orange to blue on hover

transition-property: color, background-color, border-color;
transition-duration: 100ms, .2.75s, 5s

• transition-property: color, background-color, border-color;
  transition-timing-function: ease-in, ease-out, linear;
  transition-duration: 100ms, 5s, 10s;
  tansition-delay: 0s, 2s, 7s;
  transition-timing-function: ease-in, ease-out, linear;
• ease in is accelerate slow at first, speed up at end.
• ease out deccleratte fast at first, slow down at end.
• linear constant speed
• ease-in-out speed up then slow down, default
• CSS easing animation tool - matthewlein.com/ceaser
• can specify bezier curve

• .navButton4 { color: black;
• background-color: #FF6603;
• border: 5px solid #660034;
• transition-property: color, background-color, border-color;
• transition-duration: 1s, 1s, .5s; transition-delay: 0, 0, 1s; }
• .navButton:hover
• { color: white; background-color: #660034; border-color: #FF6603; }

Animations

• css transition go from one CSS set to one other CSS set
• CSS animation can have multiple key frames
• Key Frame has specific CSS properties
• transition from one key frame to the next using, standard delay, duration, timing-function
• DW will list animation under CSS Designer More Cateogory button.
• Use internal FireFox inspect element
• This chapter we use high level tools, css3maker.com


• Good Interfaces don't exist yet,
• Difficult to get them to work
• Can be annoying to viewers, stick with subtle transitions

Creating an Animation

1. 
     first Create @keyframes fadeIn { 
       from { opacity: 0; } 
       to { opacity: 1; }
     }

2. Use animation-property use with selector .announcement { animation-name: fadeIn; animation-delay: 10s; animation-duration: 5s; animation-iteration-count: 2; /*can set to infinite but this can get annoying */ }

animation name duration timing-function delay iteration-count direction fill-mode

Subtle Button effect is good

Chapter 10 Tutorial is on pages 349-355.