How to make the transition smooth?

Question

I am trying to create two containers that will be placed in the same position. When you hover over the upper part, which should be affected by some transition, and the lower / second div should be displayed. I tried this one here

Everything is fine. But this gives some flickering effect when the mouse hovers over it. How to make a smooth transition? I use the following snippet for transition effect

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

Answer 1

Use CSS transitionto make animations 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 a -webkitspecific property of the property, so to make it compatible with the browser, 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;
}

---

, comment, .

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

---

, -, position: relative; position: absolute;, .

- , , , , .

, overlaying div, , :hover , , , , , :hover , , .