css3 animasyon/geçiş/dönüşümü: Görüntü nasıl büyür?

Question

Görüntüümün yüksekliği 1500 piksele çıkarılmak istiyorum (ve umarım genişlik otomatik olarak yeniden boyutlandırırdı, eğer olmasaydı kolayca ayarlayabilirdim)

jquery .animate() kullanıyordum ama sadece ikili ya da üçlü görüntü boyutu ..

-webkit-transform: scale(2); 

Ama belirli bir boyuta ayarlanabilir istiyorum: benim sevme ... için çok dalgalı ben kullanabilirsiniz biliyorum.

Herhangi bir yardım?

Teşekkür

Answer 1

Sen webkit kodunu -webkit-geçiş mülk arıyoruz. Bu, iki ayrı CSS kuralı (örneğin, iki sınıf) ve ardından bu kuralları değiştirirken uygulanacak geçiş türünü belirtmenize olanak tanır. Bu durumda

, sadece Eğer geçiş istediğiniz başlangıç ​​ve bitiş yükseklikleri (aşağıda örnekte hem genişliği ve yüksekliği mi) ve özellikleri için -webkit-geçiş özelliği tanımlayan tanımlamak ve olabilir süresince -webkit-geçiş süresi:

div { 
    height: 200px; 
    width: 200px; 
    -webkit-transition-property: height, width; 
    -webkit-transition-duration: 1s; 
    -moz-transition-property: height, width; 
    -moz-transition-duration: 1s; 
    transition-property: height, width; 
    transition-duration: 1s; 
    background: red; 
} 

div:hover { 
    width: 500px; 
    height: 500px; 
    -webkit-transition-property: height, width; 
    -webkit-transition-duration: 1s; 
    -moz-transition-property: height, width; 
    -moz-transition-duration: 1s; 
    transition-property: height, width; 
    transition-duration: 1s; 
    background: red; 
} 

Safari'deki test edilmiştir. Safari ekibi ayrıca CSS Visual Effects numaralı telefondan oldukça iyi bir makale yazdı. Bununla birlikte, yeni CSS3 öğelerinin IE sürümleriyle tam olarak uyumlu olmayacağı için jQuery'ye başka bir göz atmanızı tavsiye ederim.