How to make an element slide in with CSS3 transitions?

Question

I really want to know how to make a sliding transition and im not sure if it can be done with pure css or if javascript is needed. I will give an example website. The transition i am talking about is when you select one of the square icons on left side bar and the blue description slides in to the div.

into the arctic

Answer 1

It's quite easy to do in CSS, just position the containing div (with a class or id) in the non visible position and add a class when it needs to be visible (for adding that class you need JavaScript).

The class for visibility gets the final positioning.

On the base class you define a CSS transition that animates the properties that change, eg:

div.base {
    transition: left 2s;
    position:relative;
    left:-200px; /* behind something else */
}
div.visible {
    left:0px;
}

Edit: if performance is an issue you should use transform instead of left, eg transform: translate(-200px,0); . This also makes it possible to position the element how you need it, eg floating.

Answer 2

您可以使用CSS animate属性通过更改边距和/或填充来创建滑动效果来为对象设置动画

Answer 3

It is possible to do this purely in CSS depending on what you want to use as a trigger for the animation.

For a more persistent state like the linked example, it can be done with the checkbox (or radio) hack.

Note: just because it can be done, doesn't mean it should be done. While there are cases where this might work well for you, in general, you will have more control over the behavior and more flexibility in your markup by using javascript to trigger the animation. Browser support will also be a consideration.

For more information on the checkbox hack:

• CSS Tricks: Stuff you can do with the “Checkbox Hack”
• The CSS Ninja: Pure CSS collapsible tree menu

A simplistic example:

HTML:

<label for="toggle-1">A</label>
<input class="A" type="checkbox" id="toggle-1">
<label for="toggle-2">B</label>
<input class="B" type="checkbox" id="toggle-2">
<label for="toggle-3">C</label>
<input class="C" type="checkbox" id="toggle-3">
<div class="A">Panel A</div>
<div class="B">Panel B</div>
<div class="C">Panel C</div>

CSS:

/* Positions the checkbox off the screen */
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Initial DIV position off screen - this is the panel */
div {
   position: absolute;
   width: 400px;
   height: 100px;
   line-height: 100px;
   left: -400px;
   -webkit-transition: left .5s ease;
}

/* Toggled State */
input[type=checkbox].A:checked ~ div.A,
input[type=checkbox].B:checked ~ div.B,
input[type=checkbox].C:checked ~ div.C {
   left: 0;
}

demo fiddle

How it works: The checkbox is positioned offscreen. When the user clicks on a label, the associated checkbox is toggled. If the checkbox is checked, the matching sibling selector is triggered setting left to 0px - moving the panel to the right. If the checkbox is unchecked, the selector no longer matches causing the left property to revert to its original -400px value, moving the panel to the left.

Problems with this version: because these are checkboxes, they remain checked until some user action is performed. If the user doesn't close one of the panels the next panel to open will slide over or under the already open panel depending on its order in the DOM or z-index.

It is possible to do this with radio buttons as well, but the problem there is that there is no way to unselect a radio button in a pure CSS implementation, so, once selected a panel would always be visible until the next panel is selected.

You could mixin some javascript with the above to get the behavior you like or place more control in javascript.

A simplistic javascript example (I'd suggest finding better code than this!):

HTML

<div class="sel">A</div>
<div class="sel">B</div>
<div class="sel">C</div>
<div class="panel A">Panel A</div>
<div class="panel B">Panel B</div>
<div class="panel C">Panel C</div>

CSS (similar to what you had before but without the checkbox selectors)

/* Default State */
.panel {
   position: absolute;
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
    left: -400px;
    -webkit-transition: left .5s ease;
}

/* Toggled State */
.opened {
   left: 0;
}

Code:

var selectors = document.querySelectorAll('.sel');
var curSelected;

function select(evt) {
    var panels = document.querySelectorAll('.opened');
    var target = evt.target.innerText.trim();
    var i;

    for(i = 0; i < panels.length; ++i) {
        panels[i].classList.toggle('opened');
    }

    if(target !== curSelected) {
        document.querySelector('.panel.' + target).classList.toggle('opened');
        curSelected = target;
    } else {
        curSelected = false;
    }
}

for(var i = 0; i < selectors.length; ++i) {
    selectors[i].addEventListener('click', select);
}

demo fiddle