Học lap trình Web với các ngôn ngữ CSS3, HTML 5 và Javascript. Dành cho các bạn sinh viên, người muốn tìm hiểu để làm các trang web đẹp, các design thiết kế frontend một ứng dụng web. Sách bằng tiếng anh Sách tóm tắt các chức năng chính của CSS3
mộmento CSS3 e ộ d it io n Ra p l G o e t t e r Gộnộralitộs CSS est une ộvolution des langages CSS et CSS prộsentộe sous forme dune trentaine de modules distincts, dont une partie est encore lộtat de brouillon Compatibilitộ avec les navigateurs Parmi les 130 propriộtộs et 35 sộlecteurs nouveaux, une majoritộ est dộj reconnue par les navigateurs actuels, savoir Firefox 4+, Opera 11+, Chrome 10+, Safari 5+ et Internet Explorer 10 IE IE IE IE IE SAVOIR Prise en charge de CSS par les diffộrentes versions dInternet Explorer reconnaợt environ % des nouvelles propriộtộs et % des sộlecteurs reconnaợt environ % des propriộtộs et % des sộlecteurs reconnaợt environ % des propriộtộs et % des sộlecteurs reconnaợt environ 16 % des propriộtộs et 50 % des sộlecteurs 10 reconnaợt environ 80 % des propriộtộs et 80 % des sộlecteurs Prộfixes propriộtaires Le W3C propose depuis CSS 2.1 une alternative qui a le mộrite de ne pas bloquer lộvolution des agents utilisateurs : partir des informations dispensộes dans les spộcifications, chaque navigateur a carte blanche pour construire ses propriộtộs personnelles dộrivộes en les faisant prộcộder dun prộfixe vendeur propriộtaire Lorsque la spộcification atteint le stade de Recommandation Candidate (CR), le prộfixe doit ờtre supprimộ Cela concerne : les propriộtộs encore non finalisộes (ex -moz-animation , -webkitregions) ; les ộlộments propriộtaires (ex -ms-filter, -ms-zoom, -webkit-mask) LISTE DES PRẫFIXES -moz-ms-o-webkit-khtml-xv- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird Microsoft Internet Explorer Opera Moteurs WebKit (ex Safari et Chrome) Moteurs KHTML (ex Linux KDE) Propriộtộs auditives sur Opera Syntaxe des pseudo-ộlộments Depuis CSS 3, une convention dộcriture proposộe par le W3C distingue les pseudo-classes des pseudo-ộlộments Ceux-ci sộcrivent dorộnavant laide dun double deux-points (::), mais restent rộtrocompatibles avec lộcriture CSS :first-line [CSS 2] ::first-line [CSS 3] :first-letter [CSS 2] :after [CSS 2] :before [CSS 2] ::first-letter [CSS 3] ::after [CSS 3] ::before [CSS 3] Unitộs de valeur DẫFINITION Le viewport reprộsente la partie visible au sein de la fenờtre du navigateur rem : comme em mais uniquement relatif la racine () vw : pourcentage de largeur du viewport Le viewport est ộgal 100 vw vh : pourcentage de hauteur du viewport Le viewport est ộgal 100 vh vmax : hauteur ou largeur du viewport (la valeur la plus grande est conservộe) vmin : hauteur ou largeur du viewport (la valeur la + petite est conservộe) fr : fraction Gộnộralitộs gr : grid (valeur de grille, dộfinie dans le Grid Positionning Module) deg, rad, s, ms : degrộ, radian, seconde, milliseconde Fonctions calc() introduit les fonctions de calcul au sein dune valeur Ex div {width: calc(100%-20px)} :matches() introduit la notion de factorisation au sein du sộlecteur Ex :matches(div, p) a {font-size: 2em} dộsigne uniquement les liens descendants dun ou dun COMPATIBILITẫ Ces fonctions ne sont actuellement prises en charge que par un faible nombre de navigateurs : Firefox 4+, Chrome 12+, et, dans certains cas, Internet Explorer 9+ Sộlecteurs :lang : cible un ộlộment selon sa langue ou celle du document :last-child : dernier enfant dun ộlộment :nth-child : niốme enfant dun ộlộment :nth-last-child : niốme enfant en commenỗant par la fin :first-of-type : 1er enfant du type dộsignộ :nth-of-type : niốme du type dộsignộ :last-of-type : dernier du type dộsignộ :nth-last-of-type : niốme enfant dun type en commenỗant par la fin :only-child : enfant unique :only-of-type : ộlộment unique du type dộsignộ :empty : ộlộment sans enfants :target : cible dune ancre Ex :not : nộgation dun sộlecteur Ex p:not(.bloc) dộsigne tous les paragraphes, sauf les ộlộments de classe bloc Sộlecteur adjacent gộnộral E ~ F cible tous les frốres (F) suivant, directement ou non, un ộlộment dộsignộ (E) Ex blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent un bloc de citation Sộlecteurs dattributs attr^="kiwi"] : sộlection si lattribut attr dộbute par la chaợne ô kiwi ằ attr$="kiwi"] : si lattribut finit par la chaợne ô kiwi ằ attr*="kiwi"] : si lattribut contient la sous-chaợne ô kiwi ằ au sein de la chaợne contenant la valeur attr~="kiwi"] : si lattribut contient exactement ô kiwi ằ au sein de valeurs sộparộes par des espaces attr|="kiwi"] : si lattribut dộbute par ô kiwi ằ au sein de valeurs sộparộes par des traits-dunion COMPATIBILITẫ Sộlecteurs CSS Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Exception : les sộlecteurs dattributs sont compatibles depuis Internet Explorer Gộnộralitộs Sộlecteurs de formulaires :enabled : ộlộment actif :disabled : ộlộment inactif :checked : ộlộment cochộ :required : ộlộment requis pour la soumission :optional : ộlộment optionnel lors de la soumission :valid : ộlộment qui remplit les exigences de son type :invalid : ộlộment qui ne remplit pas (encore) les exigences COMPATIBILITẫ Sộlecteurs de formulaires Firefox Chrome Safari Opera 4.0+ 10+ 5.0+ 10.5+ IE 10.0+ 9+ pour :checked Media Queries Grõce aux ô requờtes de mộdia ằ CSS, il devient possible de limiter la portộe de styles un environnement dộfini par un (ou plusieurs) des critốres suivants : width, height : dimension (largeur, hauteur) de la zone daffichage ; device-width, device-height : dimension du pộriphộrique ; orientation : orientation du pộriphộrique (portait ou paysage) ; device-pixel-ratio : densitộ de pixels du pộriphộrique de sortie ; resolution : rộsolution du pộriphộrique (en dpi) ; color : prise en charge de la couleur (en bits/pixel) ; color-index : nombre dentrộes dans la table de couleurs indexộes ; aspect-ratio : ratio du pộriphộrique de sortie (ex 16/9) ; monochrome : nombre de bits par pixel sur un pộriphộrique monochrome (ộchelle de gris) ; scan : dộcrit le processus de balayage des pộriphộriques de sortie de type tộlộvision grid : dộtermine si le pộriphộrique de sortie est un pộriphộrique en grille ou bitmap Exemple : @media (max-width:480px) {body {background: green;}} La couleur de devient verte lorsque la largeur du mộdia est infộrieure ou ộgale 480 pixels COMPATIBILITẫ Firefox Chrome Safari Opera MSI Explorer 3.5+ 9.0+ 4.0+ 10.5+ 9.0+ Propriộtộs de boợtes et contenu box-sizing: content-box border-box inherit Les composantes de padding et border sont incluses lintộrieur de la boợte Elles ne sajoutent plus la largeur gộnộrale de lộlộment ; la largeur du contenu (width) en est par consộquent rộduite ; p {box-sizing: content-box;} Propriộtộs de boợtes et contenu COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.0+ 9+ 3.1+ 10.5+ 8.0+ normal break-word word-wrap: ; #aside {word-wrap: break-word;} Cộsure dun mot long un endroit arbitraire afin de provoquer un retour la ligne COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ clip ellipsis chaợne text-overflow: ; #intro {text-overflow: ellipsis;} Ajout dun signe pour indiquer que le contenu dun ộlộment est rognộ Ex La valeur ellipsis affichera des points de suspension () lendroit oự le terme est masquộ Il est ộgalement possible dindiquer une chaợne de caractốres prộdộfinie (ex text-overflow: etc.;) COMPATIBILITẫ Firefox Chrome Safari Opera IE 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ overflow-x: overflow-y: visible hidden scroll auto no-display no-content ; p {overflow-x: auto; overflow-y: hidden;} Variantes spộcifiques de la propriộtộ CSS overflow, qui agissent sur un seul axe la fois : overflow-x gốre les dộbordements horizontaux et overflow-y les dộpassement verticaux COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.0+ 9.0+ 3.1+ 10.5+ 6.0+ overflow-style: auto scrollbar panner move marquee ; #advert {overflow-style: marquee;} Diffộrentes possibilitộs de dộbordements de contenu : scroll, dộfilement automatique (marquee) ou dộplacement manuel (move) COMPATIBILITẫ Firefox Chrome Safari Opera IE non non non non non Propriộtộs de boợtes et contenu normal icon window button menu field appearance: ; div {appearance: button;} Donner un rendu dộlộment dinterface utilisateur standard du navigateur COMPATIBILITẫ Firefox Chrome Safari Opera IE 1+ 1+ 3.0+ non non resize: none both horizontal vertical ; textarea {resize: vertical;} Dộfinir si lộlộment doit ờtre redimensionnable ou non par lutilisateur COMPATIBILITẫ Firefox Chrome Safari Opera IE 4+ 9+ 4.0+ non non font-smoothing: none subpixel-antialiased antialiased ; body {font-smoothing: antialiased;} Adoucir les effets de crộnelage des caractốres de texte COMPATIBILITẫ Firefox Chrome Safari Opera IE non 10 Mac 5.0+ Mac non non font-stretch: wider narrower ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded inherit ; h1 {font-stretch: expanded;} ẫtirer ou condenser une famille de police COMPATIBILITẫ Firefox Chrome Safari Opera IE 9+ non non non 9.0+ text-stroke: text-fill-color text-stroke-color text-stroke-width ; #stroke { text-fill-color: #fff; text-stroke-color: lightblue; text-stroke-width: 2px; } Dộfinir un contour autour de chaque lettre dun texte COMPATIBILITẫ Firefox Chrome Safari Opera IE non 9.0+ 3.1+ non non Propriộtộs de boợtes et contenu auto inter-word inter-ideograph inter-cluster distribute kashida trim newsletter text-justify: ; div { text-align:justify; text-justify:inter-word; } Affiner le calcul de linterlettrage sur les contenus de textes justifiộs Par exemple, la valeur newsletter justifie les lignes en distribuant un espace de remplissage entre les mots et entre les caractốres COMPATIBILITẫ Firefox Chrome Safari Opera IE non non non non non normal pre nowrap pre-wrap pre-line white-space: ; div {white-space: pre;} Comment traiter les espaces blancs entre les mots ou les ộlộments COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 3+ 3+ 9+ 8+ text-wrap: normal none unrestricted suppress ; footer {text-wrap: suppress;} Spộcifier les rốgles de cộsure COMPATIBILITẫ Firefox Chrome Safari Opera IE non non non non non Propriộtộs dộcoratives @font-face Afficher une police exotique embarquộe sur le serveur NOTE Les diffộrents formats de polices actuels sont : ttf : TrueType Font otf : OpenType Font eot : Embedded OpenType (propriộtaire Microsoft) svg, svgz : SVG Font woff : Web Open Font Format Exemple : @font-face { font-family: Kiwi; src: url(Kiwi-Regular.ttf) format(truetype), url(Kiwi-Regular woff) format(woff); } COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.2+ 10.5+ 6.0+ Propriộtộs dộcoratives Formats @font-face reconnus Firefox Chrome ttf Safari ttf Opera ttf ttf otf otf otf otf woff woff woff woff svg svg svg svg IE 9+ IE 6, IE 7, IE eot eot ttf woff Valeurs RGBa et HSLa RGBa et HSLa ne sont pas des propriộtộs mais des valeurs qui ajoutent de la transparence ou semi-transparence une couleur dộfinie pour les propriộtộs color, background-color, border-color, box-shadow et text-shadow Ex border-color: rgba(0,255,0,0.8) indique une bordure de couleur verte opaque 80 % COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.0+ 1.0+ 3.0+ 10.5+ 9.0+ opacity: valeur entre et inherit ; #nav a {opacity: 0.6;} Agir sur lopacitộ dun ộlộment, cest--dire son degrộ de transparence rend lộlộment (et ses descendants) entiốrement invisible, tandis quavec la valeur par dộfaut de 1, il est totalement opaque COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.0+ 9.0+ 3.1+ 10.5+ 9.0+ borderradius: longueur (ộventuellement par paires : longueur 1/longueur 2) pourcentage ; bloc { border-radius: 15px 15px / 30px 30px 0; /* angle 1,2,3,4 horizontal / 1,2,3,4 vertical */ } COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.0+ 9.0+ 3.1+ 10.5+ 9.0+ borderimage: largeur de la bordure chemin vers limage valeur de chacun des traits de coupe round / stretch / repeat / space ; border { border-width: 7px 7px 16px 7px; border-image: url(block.png) 7 16 stretch; } Afficher une image au sein des bordures dun ộlộment et jouer sur diffộrents aspects de limage tels que lộtirement ou la rộpộtition round (rộpộtition) et stretch (ộtirement) indiquent le mode de distribution des parties latộrales de limage border-image: est la propriộtộ raccourcie, dont sont dộrivộes les propriộtộs suivantes : border-image-source: : URL de limage ; border-image-slice: : valeurs des traits de coupe ; border-image-width: : largeur de la bordure ; border-image-outset: : dộcalage de limage par rapport la bordure ; border-image-repeat: : type de rộpộtition de limage Propriộtộs dộcoratives COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.1+ 10.5+ non nombre inherit outline-offset: ; Pre { outline: solid 1px orange; outline-offset: 5px; } Dộfinir lespacement entre un contour (outline) et le cụtộ ou la bordure (border) dun ộlộment Un contour est une ligne dessinộe autour des ộlộments, en dehors de la bordure COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 9.0+ 4.0+ 10.5+ non box-shadow: dộcalage horizontal droite dộcalage vertical en bas fondu (taille) couleur (inset / outset) ; img {box-shadow: 8px 8px 10px #aaa;} /* 8px droite et en bas, 10px de diffusion et couleur #aaa */ Ajouter une ombre portộe sur nimporte quel ộlộment HTML La valeur optionnelle inset diffuse lombre lintộrieur de la boợte COMPATIBILITẫ Firefox Chrome Safari Opera MSI Explorer 3.5+ 9.0+ 3.1+ 10.5+ 9.0+ text-shadow: ; dộcalage horizontal droite dộcalage vertical en bas fondu couleur h1 {text-shadow: 2px 2px 4px #999;} Crộer une ombre portộe sous un texte de contenu COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.1+ 10.5+ 10.0+ Arriốre-plans Images multiples CSS rend possible laffichage de plusieurs images darriốre-plan sur un mờme ộlộment, en cumulant les valeurs au sein des propriộtộs backgroundimage, background-position et background-repeat, ces valeurs ộtant simplement sộparộes par une virgule Exemple : div { background: url(first.jpg) left top no-repeat, url(second.jpg) right bottom no-repeat; } COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Propriộtộs dộcoratives background-position: Il est possible de prộciser valeurs de position, laide dun nombre associộ aux mots-clộs top, right, bottom et left Exemple : background-position: left 3px bottom 10% ( px de la gauche et 10 % du bas) COMPATIBILITẫ Firefox Chrome Safari Opera IE 13+ non non 12 9.0+ Dộgradộ linộaire La valeur linear-gradient de la propriộtộ background-image permet de gộnộrer des arriốre-plans de couleur dộgradộe, dune couleur lautre ou via plusieurs couleurs intermộdiaires (dites ô couleurs stop ằ) back-groundimage: orientation du dộgradộ : to top / to right / to bottom / to left ou angle couleurs (position des couleurs stop en pourcentage) ; button { background-image: lineargradient(to right, #D3DAE9, #576E94);} COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.6+ 9.0+ 4.0+ 11.1+ 10.0+ Dộgradộ radial La valeur radial-gradient de la propriộtộ background-image permet de gộnộrer des arriốre-plans de couleur dộgradộe radiale, dune couleur lautre ou via plusieurs couleurs intermộdiaires (couleurs stop) backgroundimage: orientation du dộgradộ : to top / to right / to bottom / to left ou angle forme : circle / ellipse couleurs (position des couleurs stop en pourcentage) ; div {background-image: radial-gradient(to right, blue, orange 25%)} COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.6+ 10.0+ 5.1+ 11.1+ 10.0+ Dimensions, limites et origine background-size: longueur pourcentage cover contain ; div { background: url(background.jpg) left top no-repeat; background-size: 80% 80%; } Spộcifier les dimensions des images darriốre-plan dans le but de les adapter celles de lộlộment sur lequel elles sont appliquộes cover (optionnelle) redimensionne limage la taille minimale pouvant ờtre contenue, et contain la taille maximale COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.6+ 9.0+ 4.0+ 10.5+ 9.0+ Propriộtộs dộcoratives background-clip: padding-box border-box content-box ; p {background-clip: content-box;} Spộcifier les limites de rendu du fond dun ộlộment COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.6+ 9.0+ 4.0+ 10.5+ 9.0+ backgroundorigin: padding-box border-box content-box ; p {background-origin: padding-box;} Position de la zone darriốre-plan (daprốs lorigine de limage darriốre-plan) COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.6+ 9.0+ 4.0+ 10.5+ 9.0+ Propriộtộs de positionnement Multicolonnage CSS offre la possibilitộ de prộsenter un texte sur plusieurs colonnes, linstar des journaux papier, via la propriộtộ raccourcie column et ses propriộtộs dộrivộes : column-count: : nombre de colonnes ; column-gap: : espace entre les colonnes ; column-width: : largeur des colonnes ; column-span: : rộpartition dun ộlộment sur plusieurs colonnes ; column-rule: : trait de sộparation entre les colonnes ; break-before: : saut de colonne avant lộlộment ; break-after: : saut de colonne aprốs lộlộment ; break-inside: : saut de colonne au sein de lộlộment ; column-fill: : rộpartition du contenu (na deffet que sur un mộdia paginộ) Exemple : chapo { column-count: 2; column-gap: 10px; column-rule: 1px solid #ccc; } COMPATIBILITẫ Firefox Chrome Safari Opera IE 3+ 9+ 3.1+ 10.5+ 10.0+ Flexible Box Model Le modốle de boợte flexible ajoute au modốle de boợte classique de nouveaux potentiels, parmi lesquels la possibilitộ dalterner entre une distribution horizontale ou verticale des ộlộments, de disposer de largeurs fluides dans les deux sens et, surtout, de pouvoir dộfinir lordre exact daffichage des boợtes lộcran Propriộtộs de positionnement Propriộtộs : display: flex : attribution du modốle flexible (autre valeur : inline-flex) ; flex-direction: : sens daffichage (valeurs : row column, reverse-raw, reverse-column) ; order: : ordre daffichage (pondộration) ; justify-content: : alignement dans laxe principal (valeurs : flex-start, flex-end, center, space-between, space-around) ; align-items: : alignement dans laxe secondaire (valeurs : flex-start, flex-end, center, baseline, stretch) Exemple : #main { display: flex; flex-direction: reverse-column; /* distribution en colonne inversộe */ } NOTE Les spộcifications sur Flexible Box Model ont ộtộ radicalement modifiộes en mars 2012 Un certain nombre de propriộtộs ont ộtộ renommộes et leurs fonctions prộcisộes Nous adoptons ici les derniốres conventions de nommage COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 10.0+ 3.2+ non 10.0+ Grid Layout Module CSS introduit de nouvelles propriộtộs parmi les schộmas de positionnement, grid-columns: et grid-rows:, conjointement deux nouvelles unitộs de mesure, la grille (gr) et la fraction (fr) Exemple de construction de colonnes et rangộes : body { display: grid; grid-columns: 150px 1fr; grid-rows: 50px 1fr 50px; } Les ộlộments sont ensuite disposộs dans la grille laide des propriộtộs grid-column et grid-row : #item {grid-column: 2; grid-row: 4;} /*sộtend sur toute la hauteur de lignes */ #item2, #item3 {grid-column: 1; grid-row: 2;} COMPATIBILITẫ Firefox Chrome Safari Opera IE non non non non 10.0+ Regions Modốle de positionnement destinộ rộpartir du contenu au sein de zones distinctes Exemple : article { flow-into: article_flow; } #region1, #region2, #region3, #region4 { flow-from: article_flow; } Propriộtộs de positionnement COMPATIBILITẫ Firefox Chrome Safari Opera IE non non non non 10.0+ Exclusions et Shapes Surfaces dộfinies dans lesquelles le contenu peut (ou ne pas) sộcouler Exemple : #exclusion { wrap-flow: both; } /* le contenu sộcoule autour de la forme */ #rond { shape-inside: circle; } /* le contenu sộcoule dans une forme circulaire */ COMPATIBILITẫ Firefox Chrome Safari Opera IE non non non non non Transformations Transform rotate() rotation de lộlộment scale(), scaleX(), scaleY() zoom (agrandissement ou rộduction) transform: translate(), translateX(), translateY() translation selon laxe X et/ou Y skewX(), skewY() dộformation de lộlộment matrix() matrice mathộmatique ; Exemple : a:hover , a:focus { transform: scale(2) rotate(15deg) translate(5px,10px); } COMPATIBILITẫ Firefox Chrome Safari Opera IE 3.5+ 10.0+ 3.2+ 10.6+ 9.0+ Transform 3D Propriộtộs : transform-origin transform-style perspective perspective-origin backface-visibility Exemple : div {transform-style: preserve-3d; transform: rotateY(10deg)} COMPATIBILITẫ Firefox Chrome Safari Opera IE 10+ 12.0+ 4.0+ non 10.0+ Transitions transition: est la propriộtộ raccourcie, dont sont dộrivộes les propriộtộs : transition-property: : propriộtộ(s) animer ; transition-duration: : durộe de la transition (en s ou ms) ; transition-delay: : dộlai avant de dộmarrer (en s ou ms) ; transition-timing-function: : accộlộration de la transition Valeurs : linear (linộaire), ease/ease-out (rapide puis lent), ease-in (lent puis rapide), easein-out (lent-rapide-lent), cubic-Bezier Les propriộtộs concernộes par les transitions sont toutes celles qui peuvent ờtre dộfinies par une valeur numộrique : width, height, min/max-width, min/max-height, position, margin, padding, mais aussi background, opacity, font-weight, text-shadow, color, line-height, vertical-align, letter-spacing, visibility, z-index, etc Exemple : #nav a {transition: all 0.5s ease-in;} COMPATIBILITẫ Firefox Chrome Safari Opera IE 4.0+ 10.0+ 3.2+ 10.6+ 10.0+ Animations animation: est la propriộtộ raccourcie, dont sont dộrivộes les propriộtộs : animation-name : nom de lanimation ; animation-duration : durộe totale ; animation-delay : attente avant le dộbut de lanimation ; animation-iteration-count : nombre ditộrations ; animation-timing-function : accộlộration (voir Transitions) ; animation-direction : sens de lanimation (normal ou alternate) Exemple : @keyframes disparition { 0% {opacity: 1;} /* opacitộ complốte */ 50% {opacity: 0;} /* opacitộ nulle la moitiộ de lanimation */ 100% {opacity: 1;} /* retour lộtat initial */ } img {animation: disparition 2s infinite;} Safari Opera IE 10.0+ 4.0+ non non Chez le mờme ộditeur Mộmento HTML5, R RIMELẫ Mộmento CSS 2, 3e ộd R GOETTER CSS avancộes : Vers HTML et CSS R GOETTER CSS : Pratique du design web, 3e ộd R GOETTER CSS pour les web designers D CEDERHOLM HTML pour les web designers J KEITH Mộmento XHTML, 2e ộd R GOETTER Mộmento Sites web, 3e ộd E SLOẽM Code ộditeur : G13665 Chrome 5.0+ ISBN : 978-2-212-13665-4 Firefox Conception : Nord Compo COMPATIBILITẫ Merci davoir achetộ ce mộmento Vous pouvez le retrouver ainsi que toute la collection en version papier dans toutes les bonnes librairies ! HTML5 mộmento mộmento Dộcouvrez toute la collection mộmento sur : www.eyrolles.com Ergonomie web Rodolphe Rimelộ 2e ộdition Amộlie Boucher Rodolphe Rimelộ Mộmento HTML5 978-2-212-13420-9 Amộlie Boucher Mộmento - Ergonomie web 978-2-212-12698-3 mộmento mộmento Sites web Les bonnes pratiques e ộd i t i on ẫ lie S l o ùm I n d ust r ia lisa t ion PHP5 et les contributeurs Opquast Outils & bonnes pratiques Jean-Franỗ ois L ộp in e Elie Sloùm , Opquast Mộmento Sites web Les bonnes pratiques 978-2-212-12802-4 Jean-Franỗois Lộpine Mộmento Industrialisation PHP 978-2-212-13480-3 Chez le mờme ộditeur : Raphaởl Goetter CSS avancộes 978-2-212-13405-6 Rodolphe Rimelộ HTML5 978-2-212-12982-3 Tous les livres informatiques sont sur www.editions-eyrolles.com Et pour toutes les nouveautộs numộriques, retrouvez-nous sur Twitter et Facebook @ebookEyrolles EbooksEyrolles