CSS3 animation: Control back and forth

Question

I want to use input:checked selector to control animation execution and return

Expected result

div {
    position: absolute;
    bottom: -46px;
    right: -100px;
    transform: scale(0);
    overflow: hidden;
    width: 300px;
    height: 150px;
    background-color: #369;
}

@keyframes run {
    0% {
        transform: scale(0);
    }
    60% {
        right: 40%;
        bottom: 60%;
    }
    100% {
        transform: scale(1);
        right: 40%;
        bottom: 60%;
    }
}

input {
    position: absolute;
    bottom: 20px;
    right: 40px;
}

input:checked + div {
    animation: run 1s ease-in infinite;
    animation-direction: alternate;
}

<input type="checkbox"> 
<div></div>

When :checked, the animation is executed to the last frame and retained

When canceling :checked, it should return to the animation reduction

div {
    position: absolute;
    bottom: -46px;
    right: -100px;
    transform: scale(0);
    overflow: hidden;
    width: 300px;
    height: 150px;
    background-color: #369;
}

@keyframes run {
    0% {
        transform: scale(0);
    }
    60% {
        right: 40%;
        bottom: 60%;
    }
    100% {
        transform: scale(1);
        right: 40%;
        bottom: 60%;
    }
}

input {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

input:checked + div {
    animation: run 1s ease-in both;
}

<input type="checkbox"> 
<div></div>

Is JS allowed??

Abhishek Pandey
– Abhishek Pandey

2021-02-23 08:48:02 +00:00
Commented Feb 23, 2021 at 8:48 — Abhishek Pandey
– Abhishek Pandey, Commented Feb 23, 2021 at 8:48
Of course, if css can't be realized, only use js

Purple awn
– Purple awn

2021-02-23 08:59:05 +00:00
Commented Feb 23, 2021 at 8:59 — Purple awn
– Purple awn, Commented Feb 23, 2021 at 8:59

小聪聪到此一游 · Accepted Answer · 2021-02-23 09:33:49Z

1

div {
    position: absolute;
    bottom: -46px;
    right: -100px;
    transform: scale(0);
    overflow: hidden;
    width: 300px;
    height: 150px;
    background-color: #369;

    transform: scale(0);
    transition: transform 1s ease-out, right 0.6s ease-out 0.4s, bottom 0.6s ease-out 0.4s;
}

input {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

input:checked + div {
    transform: scale(1);
    right: 40%;
    bottom: 60%;

    transition: transform 1s ease-in, right 0.6s ease-in, bottom 0.6s ease-in;
}

<input type="checkbox"> 
<div></div>

answered Feb 23, 2021 at 9:33

小聪聪到此一游

1,2946 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Pandey · Accepted Answer · 2021-02-23 09:17:20Z

I have created 2 animation, and used it in the 2 separate classes, with the help of js

$("#check").change(function() {
  if ($(this).is(":checked")) {
    $("#demo").removeClass("ani-inverse").addClass("ani");
  } else {
    $("#demo").removeClass("ani").addClass("ani-inverse");
  }
})

div {
  position: absolute;
  bottom: -46px;
  right: -100px;
  transform: scale(0);
  overflow: hidden;
  width: 300px;
  height: 150px;
  background-color: #369;
}

@keyframes run {
  0% {
    transform: scale(0);
  }
  60% {
    right: 40%;
    bottom: 60%;
  }
  100% {
    transform: scale(1);
    right: 40%;
    bottom: 60%;
  }
}

@keyframes run-inverse {
  0% {
    transform: scale(1);
    right: 40%;
    bottom: 60%;
  }
  60% {
    right: 40%;
    bottom: 60%;
  }
  100% {
    transform: scale(0);
    right: 0;
    bottom: 0;
  }
}

input {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  right: 40px;
}

.ani {
  animation: run 1s ease-in both;
}

.ani-inverse {
  animation: run-inverse 1s ease-in both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check">
<div id="demo"></div>

Collectives™ on Stack Overflow

CSS3 animation: Control back and forth

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related