0

I have been trying to figure out this piece of CSS animation . What I am not able to understand is how did the creator manage to elongate the toggle so smoothly , without any keyframe animation or transform property ? Also on the HTML side, what are the <b> tags doing ? If you notice the b tags have classes assigned to them as

<b class="b switch"></b>

but the same class is selected from CSS as

.switch{

}

How does that work without the "b" ? Thanks in advance.

Community
  • 1
  • 1
Nash Vail
  • 848
  • 2
  • 11
  • 27

1 Answers1

3

The animation is just a css transition with a very small delay. Look at the transition, transition-property and transition-delay calls in your codepen example that are like:

     .check:checked ~ .switch {
        right: 2px;
        left: 22px;
        transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
        transition-property: left, right;
        transition-delay: .05s, 0s;
     }

And then there's also another cubic-brezier transition applied to the .track element when the checked element needs to return to its original css and position.

The cubic brezier is a curve type used in vector animations and this curve (and its parameters ilsted in brackets) combined with the transition delay is what accounts for the smoothness.

The basic idea behind our the above code block is:

The transition duration will be for a total of .35s (because transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);) and it will translate accross the css right and left values in accordance to its transition-property: left, right;. In addition, there will be a small delay time added to the elements transition values. The transition of the left value is passed a delay of .05s while the right property is given no delay by passing it a delay 0s.

For the cubic-bezier transition itself, it's a little more complex but don't worry not too much. You can think of each of the 4 values given in brackets as points on the x and y axis that control the velocity at which the element will transition at any given moment during its transition sequence of cubic-bezier(P0,P1,P2,P3); In other words, it smoothes out the animation by making the animation timing non-linear.

enter image description here

For more about cubic-brezier transitions see this tutorial and demo: http://www.hongkiat.com/blog/css-cubic-bezier/

The <b> tag can be used to denote bold text. Here it's not really doing that though. Often designers will use <i> (which is italics) or <b> tags as a place holder for some element which they've assigned a background img or other visual styling too because since the <b> tag only effects text they can be sure their css won't be effected by the html call.

DrewT
  • 4,983
  • 2
  • 40
  • 53
  • Did you mean it would last .32 or .35? – Scimonster Jun 08 '14 at 16:01
  • Oh you are right @Scimonster. Typo, thanks for catching it. Code has been corrected. – DrewT Jun 08 '14 at 16:03
  • Thanks for a thorough explanation, I am quite familiar with bezier curves . Call me an idiot, but I am still not able to figure out which part of the code manages to achieve that stretch transition in the knob. – Nash Vail Jun 09 '14 at 11:45
  • @nashmaniac - basically you assign `position: absolute` and a starting css position in our case a css `left` value than in your transition you assign a different css `left` to move towards. I made you a fiddle to demonstrate: http://jsfiddle.net/7g6UA/ – DrewT Jun 09 '14 at 15:19