CODEWITHSUNDEEP
css
Mihir
Mihir

Reputation: 8734

How to make transition smooth?

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;
}

Upvotes: 6

Views: 23991

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157414

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.

Upvotes: 13

Related Questions