CODEWITHSUNDEEP
csstransition
ClaytonAlanKinder
ClaytonAlanKinder

Reputation: 335

How to change the "return" of a transition in CSS?

I just started messing with transitions today and I think they're great and could have a lot of potential for future websites. This is my current code:

http://jsfiddle.net/Ldyyyf6n/

I want to change the "return" transition of the circle/square so that the text seems to go invisible as it passes back over text instead of the text awkwardly waiting to disappear until the square is back to its original position.

How would I go about doing that?

Here is my HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="wrap">
        <div class="box2">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
    <div class="box"></div>
    </div>
</body>
</html>

And the relevant CSS:

.box {
    height: 100px;
    width: 100px;
    background: blue;
    position: absolute;
    -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, border-radius 1s linear 0s, background 1s linear 0s;
}
.box2 {
    height: 100px;
    width: 83%;
    padding: 10px;
    position: absolute;
    -webkit-box-sizing: border-box;
    opacity: 0;
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s;
}
.box2 span {
    font-size: .90em;
    margin-right: 10%;
    float: left;
    font-family: 'Georgia', sans-serif;
}

.wrap:hover .box {
    border-radius: 50%;
    margin-left: 73%;
    background: coral;
}

.wrap:hover .box2 {
    opacity: 1;
}

Upvotes: 1

Views: 438

Answers (1)

showdev
showdev

Reputation: 29168

You can set different transitions for "hover over" and "hover out", like so:

.box2 {
    height: 100px;
    width: 83%;
    padding: 10px;
    position: absolute;
    -webkit-box-sizing: border-box;
    opacity: 0;
    /* This is the transition for "hover out". Note the shorter delay. */
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .2s;
}


.wrap:hover .box2 {
    opacity: 1;
    /* This is the transition for "hover". Note the longer delay. */
    -webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s;
}

WORKING EXAMPLE

Upvotes: 2

Related Questions