opacity transition in css

css transition opacity

/* Answer to: "css transition opacity" */

/*
  CSS transitions allows you to change property values smoothly,
  over a given duration.
*/

.myClass {
  vertical-align: top;
  transition: opacity 0.3s; /* Transition should take 0.3s */
  -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
  opacity: 1; /* Set opacity to 1 */
}

.myClass:hover {
  opacity: 0.5; /* On hover, set opacity to 2 */
}

/* 
  From `opacity: 1;` to `opacity: 0.5;`, the transition time should
  take 0.3 seconds as soon as the client starts to hover over the
  element.
*/

Posted by: Guest on April-20-2020

Source

/* Opacity transition in CSS By using this we can add element transition with some delay. And due to transition delay its look like animation of element. */ div { transition: opacity 0.5s; /* Transition should take 0.3s */ -webkit-transition: opacity 0.5s; /* Transition should take 0.3s */ opacity: 1; /* Set opacity to 1 */ } /* I hope it will help you. Namaste */

Code answers related to "opacity transition in css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Answers for "opacity transition in css"

Code answers related to "opacity transition in css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us