for transitioning I recommend diy!

How to transition - in css

What I have done the demonstration:

Gradients of lesbian pride flags layed on top of each other; three pride gradients (lesbian, trans+lesbian, trans) stripes of them are arranged in a hexagon pattern, with a rotation applied to them. This forms an iris pattern. On hover they transition to: A moving flower pattern, a ring, a ring with ragged spirals at first, a ring with ragged spirals

So these are some of the things I did in [insert link her]. Just hover over any of them to see the effects. I also included an extra one and one of the early mistakes! Since you can learn a lot from your mistakes.

Explanation

First let's look at what is exactly happening in each of them. The underlying principle in all of them is the same: Children (as in an element directly in another) inherit their parent property.

That means: You rotate an Element by 10 degree and then rotate the child as well (by 10 degree). The child will be rotated by 20 degree.

Now we transition (the css-kind) into it and these kinda changes happen over time.

What happens:

On the first picture I rotate each i element by 359 degrees, over 20s. On the second and the third one I apply a rotation of 10 degrees and change to width/height of the i's to 96% (relative to its parent). Why do these behave differently? Because only in the second one (not the third) do I tell the css to transition all properties. The third one does not transition width/height, so that change happens immediately! Finally, in the last one I never change the rotation. Resulting in this jagged look.

The css:

.trans-all div, .trans-all div i, .trans-all { transition: all 1s linear; }
div.trans-rotate i { transition: transform 20s linear 0s; }
div.trans-transform i{ transition: transform 1s linear 0s; }
.click-btn:active + .trans-all .trans-rotate i, .trans-rotate:hover i { transform: rotateZ(359deg); }
.click-btn:active + .trans-all .trans-ring .top-left-child-5 i, .trans-ring:hover i { width: 96%; height: 96%; transform: rotateZ(10deg); }
.click-btn:active + .trans-all .trans-shaggy i, .trans-shaggy:hover i { width: 96%; height: 96%; }

Explanation:

Let's look at the relevant/new things here:

  • transition: ... | this tells css what things to transition and how: first the 'what', second for how long, third a function/keyword telling it how the transition should proceed over time, and fourth a potential delay time
  • :hover and :active + .classname | this tells the css under which conditions to change values to the specified values. :hover should be obvious, :active + .classname means a button is pressed directly before an element with the class 'classname'
  • The class trans-all is applied to the outer div element, while trans-rotate and trans-transform are applied to inner elements. The div in front of the dot is necessary, since more specific instruction in css take precedent. Without it only first instructions would be applied!

Finishing Thoughts

You can easily play around with transition some more :). If you don't like it, you can always stop! But you will be happier for trying!

Now specificly in css, you could try changing the 'left' value, rotating on different axis, scaling, and lots more!

The general rule of thumb is: you can not transition values that have no inbetween. Like: display (so no display: block -> display: none, at least not smoothly), background-image (but color and background-color do work!).

But figuring things out yourself will be half the fun!

And for additional reading try: W3 Schools CSS Transitions page and (I'd make a diyhrt link here, but I do not know the current site!)

Back to the top