CODEWITHSUNDEEP
javascripthtmlcss
Shikha thakur
Shikha thakur

Reputation: 1289

div animation using transition

I want to animate the div when moving from left to right The div is moving fine but with no animation It is very fast and more over i have assigned the top and right property to the div when hover but it is not happening

HTML:

<body><div></div></body>

CSS:

div
{
   width:100px;
   height:100px;
   background:red;
   transition-property: right, left;
   transition-duration: 10s;
   -webkit-transition-property: right, left; /* Safari */
   -webkit-transition-duration: 2s; /* Safari */
   transition-timing-function:ease;
   position:absolute;
}

div:hover
{
   right:30px;
   top:10px;
}

JS Fiddle

I need the div to be moved with ease and slowly

Upvotes: 1

Views: 169

Answers (4)

Tusko Trush
Tusko Trush

Reputation: 430

Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser?

Try to use it, here is an example with transform

jsfiddle

Upvotes: 0

YSuraj
YSuraj

Reputation: 417

Replace right,left with margin-left.

div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;  
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:linear;
position:absolute;
}
div:hover
{
margin-left:80%; /* Using margin-left */
top:10px;
}
<body>
<div></div>
</body>

Upvotes: 0

Banzay
Banzay

Reputation: 9470

First you need to define right for starting position, e.g right: calc(100% - 100px);

.wrap {
  width: 100%;
  height: 100px;
  background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}
  <div class="wrap">
    <div class="cube"></div>
  </div>

Upvotes: 3

grinmax
grinmax

Reputation: 1855

Try this, it's works

div {
  width:100px;
  height:100px;
  background:red;
  transition: 1000ms;
  position:absolute;
  left: 0;
}

div:hover {
  left: 100%;
  margin-left: -100px;
}

JSFiddle http://jsfiddle.net/3SYka/287/

Upvotes: 0

Related Questions