CSS transition top

Navigation
8

I am creating a CSS that simulates letters from a deck, with letters and letter hands. When a one-handed card is selected it is highlighted above the others.

This works fine, however I would like to apply a transition effect to when the card is highlighted. I tried some ways without success.

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 in JSFiddle

This template would already be OK. What I need is for the transition to work with the top so that instead of the jump card an effect is displayed, a transition is smoother.

    
asked by anonymous 02.05.2014 / 15:22

3 answers

6

Simply set top: 0 to the same rule where you define the transition. Both "tips" of the transition need to be defined, and you just set the final: 

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

link

    
02.05.2014 / 15:56
2

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

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

Example

    
02.05.2014 / 15:56
1

I think this resolves: 

.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 set the transition time and translate(x,y) to move the chart.

Example

    
02.05.2014 / 15:56
Data compression. Question for Criminal Perpetrator 2012, CESPE / UnB Fix the footer of an html page and follow the contents of the page