Transitions

Transitions

Helpfully included is this link: Transitions Easing

  • The CSS property transition is simply a shorthand property for the transition-property, transition-duration, transition-timing-function, and transition-delay
  • Transitions allows you to define the transition between two states of an element - and can be defined using either pseudo-classes (i.e. :hover or :active), or dynamically set using JavaScript
  • The example below shows how a square div (with a class called circle) morphs into a circle! The class has the requisite height and width, with the magenta color
  • Crucially, the class also has the transition: background-color 1s; ease in, border-radius:2s; property. Ignoring the ease-in for now, when we combine this with the .circle:hover{...}; class, the .circle class will morph into whatever is outlined inside the hover pseudo-class
  • Below, the circle:hover pseudo-class includes a border-radius of 50% and an alternative background color (cyan). The transition of color takes 1s, and the border-radius takes 2s
  • The transition-timing-function is demonstrated by these cute blocks below! These blocks are comprised of FOUR divs in a section. In a nutshell, transition-timing-function sets how intermediate values are calculated for CSS properties being affected by a transition effect
  • We've made use of the pseudo-class nth-of-type(), plunking 1 thru 4 into that below. In addition, the margin-left property has been outlined as the thing to transition (in 3s). Notice how all of these blocks take 3 seconds to reach the right. They're 20px away from each other (see margin)
    • This is ease-in
    Ease-out
    Cubic-bezier example 1 (see link)
    Cubic-bezier example 2 (see link)
  • Famous types of transition-timing-function include ease-in, ease-out, cubic-bezier, and steps
  • Transitions are very useful, and are often used with :hover to make very presentable effects! Always remember to single out specific things you want to have transition - DON'T just transition:all; If you do, you'll get so many unanticipated problems with your page

    • Next is Transforms