div animation mit Übergang

Ich möchte das div animieren, wenn von links nach rechts bewegt Das div bewegt sich gut, aber ohne Animation Es ist sehr schnell und mehr über ich habe die obere und rechte Eigenschaft der div wenn zugewiesen schweben, aber es ist nicht passiertdiv animation mit Übergang

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

Ich brauche die div mit Leichtigkeit bewegt werden und langsam

Quelle

2017-01-10 Shikha thakur

Wenn Sie rechts und von oben Eigenschaften „Transite“ wollen, sollten Sie sie in unhovered Zustand des Elements definieren – Banzay

die Sie interessieren, ist es funktioniert

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/

Quelle

2017-01-10 07:51:06 grinmax

Zuerst müssen Sie right für Startposition definieren, zB 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>

Quelle

2017-01-10 07:51:24 Banzay

Ersetzen Sie rechts, links mit Rand-links.

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>

Quelle

2017-01-10 08:01:18 YSuraj

Wussten Sie, dass wir durch Offloading sie auf die GPU für eine bessere Rendering-Leistung im Browser-Hardware-Beschleunigung grafikintensive CSS-Funktionen können?

versuchen, es zu verwenden, hier ist ein Beispiel mit transform

jsfiddle

Quelle

2017-01-10 08:14:43

div animation mit Übergang

Antwort

Verwandte Themen