CODEWITHSUNDEEP
htmlcsssass
Sara Ree
Sara Ree

Reputation: 3543

How to reverse this SCSS animation?

Here is a code which actually creates a recording button. when you click the button the circle inside turns to a square. If you click again on the square it turns to circle again this time without any animation.

As I know next to nothing about SCSS I need some help to modify this code.

How can I Animate the square shape back to the circle?

First here is the codepen.

And here is the code:

HTML

.container
  input(type="checkbox" id="btn")
  label(for="btn")
  .time
    .h_m
    .s_ms

SCSS

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

$bg: #000;
$red: rgb(232, 4, 21);
$white: #fff;
$grey: rgb(162, 162, 162);
$cont-size: 170px;
$outer-size: $cont-size - 40;
$inner-size: $outer-size - 30;
$border-size: 6px;
$sec: 1s;
$bezier: cubic-bezier(.4, -.9, .9, 1);

@mixin animation($name) {
    @-webkit-keyframes #{$name} {@content;}
    @-moz-keyframes #{$name} {@content;}
    @-o-keyframes #{$name} {@content;}
    @keyframes #{$name} {@content;}
}

@mixin animation-use($name, $time, $easing) {
    -webkit-animation: $name $time infinite $easing;
    -moz-animation: $name $time infinite $easing;
    -o-animation: $name $time infinite $easing;
    animation: $name $time infinite $easing;
}

@mixin animate($val, $colon) {
    @include animation(to_ + $val) {
        @for $i from 1 to $val {
            #{100/$val*$i}% {
                @if ($i < 10) {
                    content: $colon + '0' + $i;
                } @else {
                    content: $colon + '' + $i;
                }
            }
        } 
    }
}

@mixin pseudo($content) {
    position: relative;
    content: $content;
}

@mixin center($val) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: $val;
    height: $val;
    margin: -$val/2 0 -$val/2;
}

@mixin delay($time) {
    -webkit-animation-delay: $time;
    animation-delay: $time;
}

@mixin once() {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@include animate(24, '');
@include animate(60, ':');
@include animate(100, ':');

@include animation(time) {
    to {
        top: 100%;
        opacity: 1;
    }
}

@include animation(stop) {
    70% {
        border-radius: 6px;
        @include center($inner-size - 40);
    } 100% {
        border-radius: 6px;
        @include center($inner-size - 36);
    }
}

body {
    overflow: hidden;
    background: $bg;

    .container {
        @include center($cont-size);

        #btn {
            display: none;

            & + label:before {
                @include center($outer-size);
                content: '';
                -webkit-transform: translate(-$border-size, -$border-size);
                -ms-transform: translate(-$border-size, -$border-size);
                transform: translate(-$border-size, -$border-size);
                border-radius: 50%;
                border: $border-size solid $white;
                cursor: pointer;
            }

            & + label:after {
                @include center($inner-size);
                content: '';
                border-radius: $inner-size/2;
                background: $red;
                cursor: pointer;
            }

            &:checked {
                & + label:after {
                    @include animation-use(stop, 0.5*$sec, $bezier);
                    @include once();
                }

                & ~ .time {
                    @include animation-use(time, 0.3*$sec, linear);
                    @include once();
                    animation-delay: 0.3*$sec;
                }

                & ~ .time .h_m:after {
                    @include animation-use(to_24, 86400*$sec, linear);
                    @include delay(1800*$sec);
                }

                & ~ .time .h_m:before {
                    @include animation-use(to_60, 3600*$sec, linear);
                    @include delay(30*$sec);
                }

                & ~ .time .s_ms:before {
                    @include animation-use(to_60, 60*$sec, linear);
                    @include delay(.5*$sec);
                }

                & ~ .time .s_ms:after {
                    @include animation-use(to_100, $sec, linear);
                }
            }
        }

        .time {
            position: absolute;
            width: 100%;
            top: 110%;
            opacity: 0;

            & > * {
                display: inline-block;
                width: 50%;
                margin: -2px;
                color: $grey;
                font-family: 'Fjalla One', sans-serif; 
                font-size: 1.3em;
            }

            .h_m:after {
                float: right;
                @include pseudo('00');
            }

            .h_m:before {
                float: right;
                @include pseudo(':00');
            }

            .s_ms:before {
                float: left;
                @include pseudo(':00');
            }

            .s_ms:after {
                float: left;
                @include pseudo(':00');
            }
        }
    }
}

Upvotes: 1

Views: 315

Answers (1)

Bryce Howitson
Bryce Howitson

Reputation: 7700

SCSS is just a faster way of writing CSS. You can get the "processed" CSS in Codepen by clicking the down arrow in the CSS pane and selecting view compiled CSS However, the SCSS, in this case, is mostly for the timecode display, not the button animation.

Here's a simplified version (using plain CSS) of what's being done in that example.

Basically, there's a checkbox and if it's checked the circle becomes a square. If not it goes back to the first state which is a circle.

This is using :checked to find out if the input is "selected" and the setting the adjacent sibling in this case the span to have a different border-radius. CSS Transition is used to animate between the two states.

label {
  display:block;
  margin: 50px;
  cursor:pointer;
  padding: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid #dadada;
  border-radius: 50%;
}

span {
  display:block;
  height: 100%;
  background-color:red;
  transition: all 0.5s cubic-bezier(.4, -.9, .9, 1);
}

input {
  display:none;
}

input + span {
  /* normal is a circle */
  border-radius: 50%;
}

input:checked + span {
  /* when the input is selected change to square */
  border-radius: 20%;
}
<label>
   <input type="checkbox" />
   <span></span>
</label>

Edit with keyframe animation.

I forked and modified the codepen to see if I could get this to work easily with the checkbox. But as expected the state isn't maintained with the checkbox and it just jumps.

And here's another fork of the codepen using the transition technique I mentioned above that does work consistently.

Upvotes: 4

Related Questions