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>

Of course, if css can't be realized, only use js – Purple awn Feb 23 '21 at 08:59 — Purple awn, Feb 23 '21 at 08:59

score 1 · Answer 1 · answered Feb 23 '21 at 09:17

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>

score 1 · Accepted Answer · answered Feb 23 '21 at 09:33

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>

CSS3 animation: Control back and forth

2 Answers2