css transition not working code example

Example 1: css background color transition

/* Answer to: "css background color transition" */

/*
  Transitions currently work in Safari, Chrome, Firefox, Opera and
  Internet Explorer 10+.

  The following should produce a fade effect for you on the browsers
  mentioned above:
*/

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Example 2: transition not working display none

/*short answer:
 use 'visibility' instead of 'display' */


/*explanation: */
/* THIS DOES NOT WORK --> */

.navigation__quaternary {
   display: none;
   opacity: 0;
   transform: scale(0.75);
   transition: 
     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.navigation__quaternary:hover {
      display: block;
      opacity: 1;
      transform: scale(1);
}

/* THIS WORKS --> */

.navigation__quaternary {
   visibility: hidden;
   opacity: 0;
   transform: scale(0.75);
   transition: 
     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.navigation__quaternary:hover {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
}

/* I think is happens because 'display:none' elements are considered 
not in the dom and thus browser cannot process transition */

Example 3: css animation not working

Can you check those OS settings and confirm that the animations are not turned off?

OSX: Settings > General > Accessibility > Reduce Motion

IOS: System Preferences > Accessibility > Display > Reduce Motion

Windows: Settings > Ease of Access > Show animations in Windows