Reading 14a

CSS transforms, transitions and animations

Transforms

• Transforms allow alt ways to size postions and change elements
• Transform comes in two settings
  • 2d and 3d
• Pretty much does what any 3d editor of photos does
• Article quoted form – Learn to Code Advancedn HTML & CSS (“https://learn.shayhowe.com/advanced-html-css/”)

  Transitions and animations

• Alters the appearance and the behavior of an element when state change occurs
• Utilize hover, focus, active, target
• transition-property, transition-duration, transition-timing-function, and transition-delay.
• Can change colors of objects, flip objects, move elements in aninmations etc
• Can do things like
  • fades
  • grow
  • shrink
  • 3d shaddows
  • inset borders
  • moving objects
  • give buttons hover animations
  • change colors and go back
  • rotating elements
  • flip

• Article quoted form – Learn to Code Advancedn HTML & CSS (“https://learn.shayhowe.com/advanced-html-css/”)

• ANimation ideas below

https://codepen.io/retyui/pen/ByoaXV https://codepen.io/akshaychauhan/pen/oAfae https://codepen.io/kieranfivestars/pen/MYdQxX https://learn.shayhowe.com/advanced-html-css/css-transforms/ https://learn.shayhowe.com/advanced-html-css/transitions-animations/ https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users https://codepen.io/dp_lewis/pen/gCfBv