Pomoc za moje kodove css animacije (ne rade u Operi i IE)

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Drugari, pocetnica sam u html i css kodiranju i molim vas da to imate na umu prilikom razmatranja mog problema

Napisala sam u css kodu jedan mali slider-animaciju sa par fotografija i izvanredno funkcionise u svim browserima osim IE i Opere.

Pretrazila sam sve moguce stranice i nikako se ne snalazim sa ovim filterima za animaciju.

Molim vas ako vam nije tesko da mi napisete css kodove za navedena dva browsera

Ovo je moj kod u koji trebam to ubaciti:

.slides {          height:215px;          overflow:hidden;          position:relative;          width:895px;                     }              .slides ul {            list-style:none;            position:relative;                    }                          /* keyframes #anim_slides */ @-webkit-keyframes anim_slides {                                0% {                                    opacity:0;                                   }                                6% {                                    opacity:1;                            }                               24% {                                    opacity:1;                            }                               30% {                                    opacity:0;                            }                              100% {                             opacity:0;                                   }                               } @-moz-keyframes anim_slides {                                0% {                                 opacity:0;                         }                             6% {                                 opacity:1;                                }                            24% {                                 opacity:1;                                }                            30% {                                 opacity:0;                                }                           100% {                                 opacity:0;                                }                            }                     .slides ul li {               opacity:0;               position:absolute;               top:0;                /* css3 animation */                                                           -webkit-animation-name: anim_slides;               -webkit-animation-duration: 24.0s;               -webkit-animation-timing-function: linear;               -webkit-animation-iteration-count: infinite;               -webkit-animation-direction: normal;               -webkit-animation-delay: 0;               -webkit-animation-play-state: running;               -webkit-animation-fill-mode: forwards;                   -moz-animation-name: anim_slides;               -moz-animation-duration: 24.0s;               -moz-animation-timing-function: linear;               -moz-animation-iteration-count: infinite;               -moz-animation-direction: normal;               -moz-animation-delay: 0;               -moz-animation-play-state: running;               -moz-animation-fill-mode: forwards;              }   /* css3 delays */ .slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {                                                               -webkit-animation-delay: 6.0s;                                                              -moz-animation-delay: 6.0s;                                                                                                           } .slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {                                                              -webkit-animation-delay: 12.0s;                                                              -moz-animation-delay: 12.0s;                                                                                                           } .slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {                                                              -webkit-animation-delay: 18.0s;                                                              -moz-animation-delay: 18.0s;                                               } .slides ul li img {                     display:block;                  }     /* keyframes #anim_titles */ @-webkit-keyframes anim_titles {                                0% {                                    right:100%;                                    opacity:0;                                   }                                6% {                                    right:2%;                                    opacity:1;                                   }                               20% {                                    right:2%;                                    opacity:1;                                   }                               26% {                                    right:100%;                                    opacity:0;                                   }                              100% {                                    right:100%;                                    opacity:0;                                   }                               }                 @-moz-keyframes anim_titles {                             0% {                                 right:100%;                                 opacity:0;                                }                             6% {                                 right:1%;                                 opacity:1;                                }                            20% {                                 right:1%;                                 opacity:1;                                }                            26% {                                 right:100%;                                 opacity:0;                                }                           100% {                                 right:100%;                                 opacity:0;                                }                           }     .slides ul li div {                   background: #8a2e3d; /* Old browsers */                    background: -moz-linear-gradient(top, #8a2e3d 0%, #400000 100%); /* FF3.6+ */                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a2e3d), color-stop(100%,#400000)); /* Chrome,Safari4+ */                    background: -webkit-linear-gradient(top, #8a2e3d 0%,#400000 100%); /* Chrome10+,Safari5.1+ */                    background: -o-linear-gradient(top, #8a2e3d 0%,#400000 100%); /* Opera 11.10+ */                    background: -ms-linear-gradient(top, #8a2e3d 0%,#400000 100%); /* IE10+ */                    background: linear-gradient(to bottom, #8a2e3d 0%,#400000 100%); /* W3C */                zoom: 1;                    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#8a2e3d, endColorstr=#400000, GradientType=0); /*IE*/                    -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#8a2e3d, endColorStr=#400000 ); /*IE*/                                 border-radius:5px;                border: 1px solid #400000;                   box-shadow:0 0 3px #FFFFFF inset;                   color:#FFF;                font:12px inherit;                font-style:oblique;                text-align: center;                margin:0 auto;                   padding:10px;                   position:absolute;                   top:80%;                   width:300px;                       /* css3 animation */                                                       -webkit-animation-name: anim_titles;                   -webkit-animation-duration: 24.0s;                   -webkit-animation-timing-function: linear;                   -webkit-animation-iteration-count: infinite;                   -webkit-animation-direction: normal;                   -webkit-animation-delay: 0;                   -webkit-animation-play-state: running;                   -webkit-animation-fill-mode: forwards;                       -moz-animation-name: anim_titles;                   -moz-animation-duration: 24.0s;                   -moz-animation-timing-function: linear;                   -moz-animation-iteration-count: infinite;                   -moz-animation-direction: normal;                   -moz-animation-delay: 0;                   -moz-animation-play-state: running;                   -moz-animation-fill-mode: forwards;                  }

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Pa neće raditi, jer su korišćena neka, za sada u fazi testiranja svojstva, koja rade u Firefox-u (-moz-) i Chrome-u i Safari-ju (-webkit-).

Moj ti je savet da pronađeš neki slajder plugin i implementiraš ga na sajt.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Svacam to, ali ja zelim upravo ovaj moj slider da upotpunim, jer sam vec dugo na njemu radila i zadovoljna sam reultatom, nisam za plug-ine i javu il inesto tako. Iskljucivo css i html :-)
Sa druge strane, ova svojstva-filteri -ms-, -webkit- i -moz- se koriste vec nekoliko godina i funkcionisu ispravno i bez problema, podjednako kao i filteri za Operu i IE tipova: -o-transform, filter:alpha, progid ... itd.
Dakle, mozda nisam bila dovoljno jasna, vec postoje ovi filteri animacija i transformacija za Operu i IE koji funkcionisu i pun je internet razlicitih jednostavnih slidera sa ugradjenim filterima za Operu i IE, samo je problem sto ja ne umijem da ih integrisem i adaptiram u ovaj moj kod, jer se ne snalazim u svemu ovome dovoljno :-( Tek sam pocetnica, zato sam i otvorila temu ako neko moze da pokusa samo da na ovaj moj kod doda postojece filtere za Operu i IE.
Pleaseeee

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Svaka tebi čast što ti to želiš sama da uradiš, ali neke stvari ne rade ili ne rade isto u svim browser-ima. Pogotovo u IE8 i starije. Pogledaj link koji sam ostavio, tamo imaš objašnjenje konkretno za svojstva sa -moz prefiksom, gde stoji da u test fazi. To što oni dugo postoje, sigurno nisu uvedeni neki standardi i nisu svuda primenjeni, pa ih sami proizvođači prave samo za svoje browser-e. Nekad je problem napraviti slajder sa jQuery+HTML+CSS i da radi lepo u svim browser-ima.

[Link mogu videti samo ulogovani korisnici]

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Hvala cvrlebg , ali u praksi se pokazalo da filteri funkcionisu kad se ispravno postave i napisu to je ono sto me ohrabruje. Problem je samo sto sam ja pocetnica i ne snalazim se dobro u znacenjima nekih funkcija i samim tim ne umijem da napisem kod kako treba.

Opera nudi filtere koji funkcionisu za ovo sto meni treba:
[Link mogu videti samo ulogovani korisnici]
ali ja neznam da ih integrisem u ovaj moj kod, zato sam zamolila ako neko od vas ima strpljenja da to uradi za mene?

Takodjer i IE nudi opciju koja radi u praksi ovo sto mi treba:
[Link mogu videti samo ulogovani korisnici]
kao i Alpha filter i Fade in i Fade Out efekte, postoje i za Operu i za IE

ali opet se vracamo na moje neznanje da te filtere ugradim u moj kod odnosno da pravilno napisem ove opsege.

Da zakljucim, eksperimentisala sam malo sa ovim filterima i uocila sam da funkcionisu ispravno, ali ih ja ne postavim pravilno. Bila bi zahvalna ako bi neko imao malo vise strpljenja da mi to slozi kako treba pa da u praksi zaista vidim moze li. Znam samo da rade 100%!