Tillsammans med introduktionen av CSS3 kommer många nya funktioner som kan användas för att skapa bra effekter. En av de mest användbara är övergångsegenskapen .
Övergångsegenskapen är en viktig ny utveckling i CSS. Den kan användas för att skapa en dynamisk förändringseffekt på en div eller klass med en enkel struktur:
transition: property duration timing-function delay;CSS3s övergång är ett bra sätt att lägga till lite animering på webbplatser utan det stora överskottet av ett JavaScript-bibliotek som jQuery.
Innan vi börjar kan du se en demo här av Övergångsegenskapen i aktion .
För det första, för att övergångsegenskapen ska fungera måste den standardegenskap som den tillämpas på definieras. Förmodligen är de två vanligaste egenskaperna som ska definieras bredd och höjd. Att skriva egenskapen fristående använd bara:
transition-property: define propertyEfter det att egenskapen har definierats måste start- och slutvärdena tilldelas. Vid värden som bredd eller höjd måste egenskapen ställas in med ett startvärde och sedan ett slutvärde med något annat tillstånd.
Till exempel här ställer vi övergångsegenskapen till bredd, sedan startvärdet på bredden och anger sedan slutvärdet när elementet svängs över:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nu när vi har definierat egenskapen att transformera, start- och slutvärdena, måste vi definiera varaktigheten för övergången. Detta uppnås genom att definiera en längd i antingen sekunder eller millisekunder som nedan:
transition-duration: duration;Genom att bygga detta i exemplet skapas följande kod:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Detta innebär att huvudhuvuddelaren kommer att expandera med 25 px under en varaktighet av 5 sekunder.
Koden är tillräcklig för att skapa en bra effekt, men vi kan vidare använda övergångsegenskapen CSS3 med hjälp av timing-funktionen. Med den här egenskapen är det möjligt att ändra hastighetskurvan för övergångsperioden. Övergångsegenskapen är som standard inställd på en linjär kurva. Du kan dock definiera lätthet, lätthet, lätthet, lätthet och till och med kubisk-bezier för att ändra hastighetskurvan. Cubic-bezier kan du definiera dina egna värden med (n, n, n, n) där n kan vara mellan 0 och 1 (till exempel linjär skulle vara (0,0,1,1)).
Läggande i denna kod till vårt exempel resulterar i:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Dessutom definierar mycket som övergångsperiod, med övergångsfördröjningsegenskapen, en paus innan övergångseffekten börjar:
transition-delay: time;Slutligen är det viktigt att överväga två saker när du använder övergångsegenskapen CSS3. För det första kräver de flesta webbläsare i omlopp för närvarande ett webbläsarprefix för att använda det (undantagen är IE10, Opera och Firefox16 +):
-moz-övergång: för Firefox 15
-webkit-övergång: för Chrome och Safari
(Tänk på att IE9 och lägre inte stöder övergångsegenskapen alls.)
För det andra, även om jag har använt den långa handen i exemplen ovan för tydlighet, anses det vara bästa praxis att skriva i kort form, enligt följande:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Använd CSS3: s övergångsegenskap? Hur jämför det med jQuery-baserade tweens? Låt oss veta i kommentarerna.