CSS Transition top

Asked

Viewed 2,326 times

9

I’m creating a CSS that simulates cards from a deck, with cards and card hands. When a one-hand card is selected it is highlighted above the others.

This works well, but I would like to apply a transition effect to when the letter is highlighted. I tried in some ways unsuccessfully.

Follow the code below:

HTML:

<body>
    <br /><br />
    <div class="hand">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</body>

CSS:

.card {
    width: 140px;
    height: 190px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
    background: white;
}
.hand {
    position: relative;
}
.hand .card {
    position: absolute;
    transition: top .5s;
}
.hand .card:hover, .hand .card.selected {
    top: -2em;
}
.hand .card:nth-child(1)  { left: 1.1em; }
.hand .card:nth-child(2)  { left: 2.2em; }
.hand .card:nth-child(3)  { left: 3.3em; }
.hand .card:nth-child(4)  { left: 4.4em; }
.hand .card:nth-child(5)  { left: 5.5em; }
.hand .card:nth-child(6)  { left: 6.6em; }
.hand .card:nth-child(7)  { left: 7.7em; }
.hand .card:nth-child(8)  { left: 8.8em; }
.hand .card:nth-child(9)  { left: 9.9em; }

Link to the sample on Jsfiddle

That model would be OK. What I need is for Transition to work with the top, so that instead of the jumping card, it displays an effect, a smoother transition.

css

3 answers

7


Simply define top: 0 in the same rule where you define the transition. Both "ends" of the transition need to be defined, and you only set the end:

.hand .card {
    position: absolute;
    transition: top .5s;
    top: 0;
}

http://jsfiddle.net/q9DBN/7/

  • +1 - this is the right answer with the detail that (me) lacked

  • 1

    In fact the various solutions pointed out would suit me, but this was the most didactic, because pointed out the failure and the solution...

2

I suggest using the margin-top. In this case the CSS could be like this:

.hand .card {
    position: absolute;
    transition: margin-top 0.3s;
}
.hand .card:hover, .hand .card.selected {
    margin-top: -2em;
}

Example

1

I think that solves:

.hand .card {
    position: absolute;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transform: translate(0,0em);
    -webkit-transform: translate(0,0em);
    -o-transform: translate(0,0em); 
    -moz-transform: translate(0,0em);
}

.hand .card:hover, .hand .card.selected {
    position: absolute;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transform: translate(0,-2em);
    -webkit-transform: translate(0,-2em);
    -o-transform: translate(0,-2em); 
    -moz-transform: translate(0,-2em);
}

Using transition-duration to define the transition time and translate(x,y) to move the card.

Example

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.