body { background-color:white;} #menu {width:250px; } #disp { position:absolute; left:228px; top:160px; width:530px;z-index:5; } .small { font-size:11px; line-height:15px; } .norm {} .bold { font-weight:bold} .ital { font:italic 12px Verdana; } /* madoido: kutumia transition */ a.kifungo {background-color:gray; -webkit-box-shadow:0 0 5px rgba(150, 150, 150, 0.9);-moz-box-shadow:0 0 5px rgba(150, 150, 150, 0.9);-ms-box-shadow:0 0 5px rgba(150, 150, 150, 0.9); -o-box-shadow:0 0 5px rgba(150, 150, 150, 0.9); box-shadow: 0 0 5px rgba(150, 150, 150, 0.9);-webkit-transition: 5s ease-in-out all; -moz-transition: 5s ease-in-out all;-ms-transition: 5s ease-in-out all; -o-transition: 1s ease-in-out all;transition: 5s ease-in-out all;} a.kifungo:hover {background-color:#000099;} /* madoido hayo hayo: kutumia animations ambazo 1) hazitegemei Zustandsanderungen kama hover n.k. 2) unaweza kuweka beliebig nyingi Zwischenzustaende 3)unaweza kuziongoza kisahihi zaidi k.m. kwa kuweka marudio mangapi yawemo. Usiposema kitu, animation itafanyika mara moja tu. ukiweka "infinite" itarudiwa milele */ @keyframes waka { 0% {background-color:#aaaaaa;} 40% {background-color:#00aa00;} 100% {background-color:#0000aa;} } @-webkti-keyframes waka { 0% {background-color:#aaaaaa;} 40% {background-color:#00aa00;} 100% {background-color:#0000aa;} } a.kifungo-a:hover {-webkit-animation: waka 1s ease 5 alternate; -webkit-animation-delay: 2s;-webkit-animation-fill-mode:forwards; -moz-animation: waka 1s ease 5 alternate; -moz-animation-delay: 2s;-moz-animation-fill-mode:forwards; -ms-animation: waka 1s ease 5 alternate; -ms-animation-delay: 2s;-ms-animation-fill-mode:forwards; -o-animation: waka 1s ease 5 alternate; -o-animation-delay: 2s;-o-animation-fill-mode:forwards; animation: waka 1s ease 5 alternate; animation-delay: 2s;animation-fill-mode:forwards;} /* badala ya ease unaweza kuweka (pia kwenye transitions): ease-in, ease-out, ease-in-out, linear, steps PIA unaweza kuongezea: cubic-bezier() PIA animation hazitegemei hover n.k. UKIONDOA "hover" basi animation itaanza mara tu ukurasa ukifunguliwa. namba tano ni idadi ya marudio "alternate" maana yake animation-direction. Aina nyingine ni: reverse au alternate-reverse: Kirefu chake ni: animation-name:waka;animation-duration:1s;animation-timing-function:ease;animation-iteration-count:5;animation-direction:alternate; ILE fillmode inahakikisha kuwa kitufe kinabakia na rangi ya mwisho bila kuruka. Animation complicated zinafaa kungoja mpaka kila kitu kiwe kimekuwa geladen: Hivyo andika halafu: .laden * {animation-play-state:paused;} Badala ya paused unaweza kuweka: "running". Kwa brauza za kizamani: ufomati kifungo ili kionekane kama kitakatavyokuwa mwisho mwa animation */ /* chini ni ile ORIJINO */ /* chini ni ile ORIJINO */ /* chini ni ile ORIJINO */ /* chini ni ile ORIJINO */ body { background-color:white;} #menu {width:250px; } #disp { position:absolute; left:233px; top:160px; width:530px;z-index:5; } .small { font-size:11px; line-height:15px; } .norm {} .bold { font-weight:bold} .ital { font:italic 12px Verdana; } /* madoido: kutumia transition */ a.kifungo-orij {background-color:gray; -webkit-box-shadow:0 0 5px rgba(150, 150, 150, 0.9);-moz-box-shadow:0 0 5px rgba(150, 150, 150, 0.9);-ms-box-shadow:0 0 5px rgba(150, 150, 150, 0.9); -o-box-shadow:0 0 5px rgba(150, 150, 150, 0.9); box-shadow: 0 0 5px rgba(150, 150, 150, 0.9);-webkit-transition: 1s ease all; -moz-transition: 1s ease all;-ms-transition: 1s ease all; -o-transition: 1s ease all;transition: 1s ease all;} a.kifungo-orij:hover {background-color:#009900;} /* madoido hayo hayo: kutumia animations ambazo 1) hazitegemei Zustandsanderungen kama hover n.k. 2) unaweza kuweka beliebig nyingi Zwischenzustaende 3)unaweza kuziongoza kisahihi zaidi k.m. kwa kuweka marudio mangapi yawemo. Usiposema kitu, animation itafanyika mara moja tu. ukiweka "infinite" itarudiwa milele */ @keyframes waka { 0% {background-color:#aaaaaa;} 40% {background-color:#00aa00;} 100% {background-color:#0000aa;} } @-webkti-keyframes waka { 0% {background-color:#aaaaaa;} 40% {background-color:#00aa00;} 100% {background-color:#0000aa;} } a.kifungo-orij-a:hover {-webkit-animation: waka 1s ease 5 alternate; -webkit-animation-delay: 2s;-webkit-animation-fill-mode:forwards; -moz-animation: waka 1s ease 5 alternate; -moz-animation-delay: 2s;-moz-animation-fill-mode:forwards; -ms-animation: waka 1s ease 5 alternate; -ms-animation-delay: 2s;-ms-animation-fill-mode:forwards; -o-animation: waka 1s ease 5 alternate; -o-animation-delay: 2s;-o-animation-fill-mode:forwards; animation: waka 1s ease 5 alternate; animation-delay: 2s;animation-fill-mode:forwards;} /* badala ya ease unaweza kuweka (pia kwenye transitions): ease-in, ease-out, ease-in-out, linear, steps PIA unaweza kuongezea: cubic-bezier() PIA animation hazitegemei hover n.k. UKIONDOA "hover" basi animation itaanza mara tu ukurasa ukifunguliwa. namba tano ni idadi ya marudio "alternate" maana yake animation-direction. Aina nyingine ni: reverse au alternate-reverse: Kirefu chake ni: animation-name:waka;animation-duration:1s;animation-timing-function:ease;animation-iteration-count:5;animation-direction:alternate; ILE fillmode inahakikisha kuwa kitufe kinabakia na rangi ya mwisho bila kuruka. Animation complicated zinafaa kungoja mpaka kila kitu kiwe kimekuwa geladen: Hivyo andika halafu: .laden * {animation-play-state:paused;} Badala ya paused unaweza kuweka: "running". Kwa brauza za kizamani: ufomati kifungo ili kionekane kama kitakatavyokuwa mwisho mwa animation */