css-transitions

How To Add CSS3 Transition With HTML5 details/summary tag reveal?

by

This should fix it. details[open] summary ~ * { animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0; margin-left: -10px} 100% {opacity: 1; margin-left: 0px} } <details> <summary>Copyright 1999-2014.</summary> <p> – by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> … Read more

Using CSS transitions in CSS Grid Layout

by

According to the spec, transitions should work on grid-template-columns and grid-template-rows. 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties Animatable: as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list So, if my interpretation is correct, as long … Read more

css transition with linear gradient [duplicate]

by

Sadly, you really can’t transition gradients for now. So, the only workable workaround is using an extra element with needed gradient and transition it’s opacity: a.button { position: relative; z-index: 9; display: inline-block; padding: 0 10px; background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956)); background: -webkit-linear-gradient(top, green, #a5c956); background: -moz-linear-gradient(top, green, #a5c956); background: -o-linear-gradient(top, green, … Read more

Animating max-height with CSS transitions

by

Fix delay solution: Put cubic-bezier(0, 1, 0, 1) transition function for element. scss .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); &.full { max-height: 1000px; transition: max-height 1s ease-in-out; } } css .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .text.full { max-height: 1000px; … Read more

Is it possible to animate Flexbox inserts & removes?

by

I’ve fixed up @skyline3000’s demo based on this example from Treehouse. Not sure if this will break again if browsers change but this seems to be the intended way to animate flex size changes: http://jsfiddle.net/2gbPg/2/ Also I used jQuery but it technically isn’t required. .flexed { background: grey; /* The border seems to cause drawing … Read more

Spin or rotate an image on hover

by

You can use CSS3 transitions with rotate() to spin the image on hover. Rotating image : img { transition: transform .7s ease-in-out; } img:hover { transform: rotate(360deg); } <img src=”https://i.stack.imgur.com/BLkKe.jpg” width=”100″ height=”100″/> Here is a fiddle DEMO More info and references : a guide about CSS transitions on MDN a guide about CSS transforms on … Read more