transition-delay: 0s, 0s, 0s;transition-duration: 0.4s, 0.4s, 0.4s;transition-property: width, height, -moz-transform;transition-timing-function: ease, ease, ease;
Witam chce zwiększać element od prawej do lewej lub powiększać od dołu do góry nie odwrotnie. Czy z wykorzystaniem CSS3 jest takie coś możliwe czekam na sugestie
kombinując z position da się uzyskać taki efekt (nie zmieniasz width i height, a top, bottom)
ale nie potrafię sobie wyobrazić jak dzięki temu temu mógł bym osiągnąć swój cel mam nałożony obrazek na obrazek i chce stopniowo pokazywać od dołu do góry a używając position będę miał efekt przesuwania co ogólne się nie w komponuje w dany projekt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
.wrapper {
height: 200px;
width: 200px;
background: blue;
position: relative;
}
.box {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
background: red;
transition-delay: 0s, 0s, 0s;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-property: width, height, -moz-transform;
transition-timing-function: ease, ease, ease;
}
.wrapper:hover .box {
height: 200px;
width: 200px;
}
źle przeczytałem nazwę tematu, jak chcesz wjazd od prawej zmień
left:0;
na right: 0;
Fajnie to wygląda ale niestety jest efekt przesuwania tego elementu na drugi na przykładzie 2 obrazków widać to bardzo dobrze na przykładzie pełnych kwadratów niestety nie;/
ale dzięki za chęci
I widzisz efekt jest taki że ten obrazek wjeżdża od prawego dolnego rogu a ja chce mieć taki efekt jak by ten obrazek już tam był tylko nie widzialny i aby go po kawałku odkrywało
http://jsbin.com/qirubeteju/1/
efekt jak tutaj tylko z drugiej strony
jak tlo jest jednolite to narzuc jakis cover na to i jego animuj => http://jsbin.com/notojaboyu/7/
najedz w lewym gornym rogu. ale tlo musi byc jednolite, zeby byl efekt
Wystarczyło od początku jasno napisać o co Ci chodzi ;]
Dorzucę swoje 3grosze skoro rozwiązanie już jest będzie to bardziej tips :)
W css3 zamiast animować transition: left / right lepiej zrobić transition: transform oraz transform: translate3d(..)
Gdy animujemy więcej elementów możemy odczuć znaczną różnicę w wydajności na korzyść wykorzystania transform3d ponieważ ten spróbuje wymusić przyśpieszenie sprzętowe naszego GPU.