CSS3 transition - wyjątki

0

Z tego co udało mi się wyczytać można animować np tylko zwiększenie marginesów albo tylko zmianę kolorów albo wszystko na raz (domyślne) ale czy da się zrobić tak aby animowane było wszystko poza np zmianą koloru?
czyli np element powiększa się płynnie w danym czasie ale jego kolor zmienia się natychmiast (bez animacji) jak to zrobić?

0

http://www.w3schools.com/css3/css3_transitions.asp

jasno pokazuje ze mozesz animowac tylko te elementy ktore chcesz i to w dowolnej konfiguracji.

Jesli nie zastosujesz transform do background bedzie on zmieniony natychmiast.

0

Nie zrozumiałeś, chodzi mi o to że chce animować wszystkie elementy poza określonymi - tam są przykłady jak animować np tylko wysokość a reszty nie a co gdybym chciał animować wysokość, kolor tekstu i obramowanie a background żeby przeskakiwał od razu bez przejścia?

0

No to musisz animować tylko to co chcesz, a resztę zmieniać bez animacji ?

0

Przyklad z w3schools:

ja dodalem tylko rzecz NIEANIMOWANA

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
background:black;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

tlo NIEANIMOWANE

0
szalonyfacet napisał(a):

Przyklad z w3schools:

ja dodalem tylko rzecz NIEANIMOWANA

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
background:black;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

tlo NIEANIMOWANE

Dalej nie rozumiesz o co chodzi ;/
Dodaj do hovera jeszcze zmiane wysokości (np.: height:190px;) wysokość też zmieni się bez animacji bo masz napisane że animować ma tylko szerokość.
Ja pytam się czy da się zrobić tak aby animowało WSZYSTKIE elementy poza wpisanymi

@emfałsi
Pytam bo gdybym miał animować każdy element z osobna i co chwile aktualizować które elementy maja być animowane a które nie to bym się zastrzelił... wiem że np tło ma być skokowe a reszta (bez względu co dopisze) ma przechodzić tonalnie... da się takie coś zrobić czy działą to tylko w drugą stronę?

0

transition mozna ustawic na wlasciwosc, na none i na all, wiec albo none i poszczegolne, albo all ale bez odejmowania elementow..
zawsze mozesz uzyc mieszanego transition gdzie wszystko masz w jednej linii, ew sprobwac z .css. less i napisac funkcje ktora to ogarnie

1 użytkowników online, w tym zalogowanych: 0, gości: 1