How to make transition smooth?

Question

I am trying to create two containers which will be placed at the same position. When I mouse hover on top one that should affected with some transition and bottom/second div content should display. I tried this here

Everything is fine.But it is giving some flicker effect when i mouse hover on it. How to make it smooth transition? I am using following snippet for transition effect

.box:hover{
    -webkit-transform:  rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
}

Answer 1

Use CSS transition property to make the animation smoother

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:20%;
    left:40%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

Demo

---

Note: You are using -webkit specific proprietary property, so inorder to make it cross browser compatible, use

Demo

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:20%;
    left:40%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.box1 {
    height:150px;
    width:200px;
    border:1px solid black;
    position:absolute;
    top:20%;
    left:40%;
    z-index:-100;
}
.box:hover {
    -webkit-transform: rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
     -moz-transform: rotate(100deg) scale(1);
    -moz-transform-origin:bottom right;
     transform: rotate(100deg) scale(1);
    transform-origin:bottom right;
}

---

Well, you asked for a solution in your comment and I provided a solution for that as well..

<div class='box1'>
    <div class='box'></div>
    <p class="innerText">This is content</p>
</div>

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:0%;
    left:0%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.box1 {
    height:150px;
    width:200px;
    border:1px solid black;
    position:absolute;
    top:20%;
    left:40%;
    z-index:-100;
}
.box1:hover .box {
    -webkit-transform: rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
     -moz-transform: rotate(100deg) scale(1);
    -moz-transform-origin:bottom right;
     transform: rotate(100deg) scale(1);
    transform-origin:bottom right;
}

Demo

---

The difference between my code and your code is that first, you missed a position: relative; container around an element having position: absolute; which will always bring you undesired results.

Second mistake was the markup, if you are looking to hide an element, you should nest an overlaying element rather than placing it outside the element you want to hide.

So in my example, I shifted the overlaying element in the div, and the main part comes here, you used :hover on the same element you were transforming, and thus it was collapsing for no reason, instead, in my selector, I am triggering the animation on :hover of the parent element, and not the element it self which is to be transformed.