Apply CSS Properties When Transition Ends

Apply extra CSS property AFTER previous transition is completed

As Santiago pointed out, you can't transition the shorthand 'border' property. But you can transition border-width and border-color.

You could try to transition the border to the same color as the background instead of none. You could also transition the width of the border to 0.

I tweaked your example a little for a quick and dirty way to make it work with a toggle for demo purposes.

$('button').click(function() {  $('#sidebar').toggleClass("closed");});

#sidebar {  border-left-style: solid;  border-left-color: black;  border-left-width: 10px;  white-space: nowrap;  overflow-x: hidden;  width: 300px;  transition: all .25s;  /* added for demo */  background: purple;}
#sidebar.closed {  width: 0px;  border-left-color: white;  border-left-width: 0;  border-left-style: solid;  transition: all .25s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="sidebar"><p>Sidebar</p></div>
<button>Close sidebar</button>

Delaying a second css property until after the first transition is complete

You can specify delays for any property you like:

div {
  transition: height 0.3s ease, background 0.3s ease 0.3s;
}

(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)

CSS: Preventing a property to affect on element until the end of transition

Add a transition also for z-index, but insert a delay only when .box is in normal state.

Doing so the z-index will change istantly on hover, while on the opposite action (“unhover”) the z-index will take its initial value but only after 0.5 seconds (the duration of your expanding effect is 0.4 seconds)

.box {
   ...
   z-index: 1;
   -webkit-transition: z-index 0s .5s;   
      -moz-transition: z-index 0s .5s;   
           transition: z-index 0s .5s;   
}

.box:hover {
    -webkit-transition: z-index 0s 0s;
       -moz-transition: z-index 0s 0s;   
            transition: z-index 0s 0s; 
    z-index: 50;
}

example: http://jsfiddle.net/yjg2oach/

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

CSS Transition after animation ends

I have forked your project and adapted it so it works. You can find it here.

What I have changed is the following:

I give the white square a start position of top: 150px and let it, on hover of div, get a top: 0. The span gets a transition: top .5s and with that it goes to top: 0; on hover and back to top: 150px; when the mouse leaves.

I have removed the translateY(-60px); from the animation, because that would move it even more up when the animation would start.

Here's your new CSS:

div {
    width: 200px;
    height: 200px;
    margin: 40px auto;
    background-color: #b00;
    position: relative;

    &:hover {
        span {
            top: 0px;
            animation: rotate 1s infinite .5s alternate;
            animation-direction: alternate;
        }
    }
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    bottom: 10px;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
    transition: top .5s;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-90deg);
    }
}

Edit: The problem is that an animation is time-based and not action-based, which means that as soon as you trigger an animation, a timer starts running and it will run through all the keyframes until the set time has passed. Hover-in and hover-out have no effect, except that the timer can be stopped prematurely, but the animation will not continue (or reversed, which you wanted) after that. transition is action-based, which means it gets triggered every time an action (for example :hover) is happening. On :hover, this means it takes .5s to go to top:0 and when the hover ends, it takes .5s to got to top:150px.

I hope the above addition makes sense :)

As you can see, I also cleaned up a bit in your animation-name: etc., since it can be combined into one line.

Modify position after transition ends

Instead of thinking about changing position why not changing how the animation works. You may try the use of scale and adjust transform-origin to decide how the image should move (and also optimize your markup)

.container {  display: flex;  flex-direction: row;  flex-wrap: wrap;  width: 400px;}
.container img {  width: 100px;  height: 100px;  transition: 0.5s ease-out;  transform-origin: top left;}
.container img:nth-child(even) {  transform-origin: top right;}
.container img:nth-child(2n+5) {  transform-origin: bottom left;}
.container img:nth-child(2n+6) {  transform-origin: bottom right;}
.container img:hover {  position: relative;  z-index: 2;  transform: scale(2);}

<div class="container">  <img src="https://lorempixel.com/100/100/">  <img src="https://lorempixel.com/150/150/">  <img src="https://lorempixel.com/200/200/">  <img src="https://lorempixel.com/300/300/">  <img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">  <img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">  <img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">  <img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png"></div>

---

Related Topics