Reverse animation of CSS3 (when the courseor is removed)



  • When the cadet is on the site, animation is on the cs. When the cadet is removed, the animation works again with the same parameters and the same order.


    When we put on a rectangle in this block: (1) On the left and on the right, the storks are moving (single blue rectangles) (2) The button "details" is down on top.

    When we remove the rectangle: (1) Storms moving (2) The button goes back upstairs.

    Can animation be changed so that when UBIRAEM is a courser, first Did you leave the button "detail," and then the curtains went off?

    (the animation at the introduction should remain in the order in which it is now available).



  • Not with buttons and curtains, but I think I understand:

    .container {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    .stage1 {
        position: absolute;
        width: 10px;
        height: 100px;
        background: #afa;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0.75s;  /* <<<=== */
    }
    .container:hover > .stage1 {
        width: 50px;
        transition-delay: 0s;  /* <<<=== */
    }
    .stage2 {
        position: absolute;
        height: 10px;
        width: 100px;
        background: #aaf;
        transition-property: height;
        transition-duration: 1s;  /* <<<=== */
    }
    .container:hover > .stage2 {
        height: 50px;
        transition-delay: 0.75s;  /* <<<=== */
    }
    <div class="container">
        <div class="stage1"></div>
        <div class="stage2"></div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2