animacja css

Odpowiedz Nowy wątek
2014-12-15 20:17
0

1) Chcę ustawić div.logo by był cały czas widoczny tak jak po otworzeniu strony. Aktualnie tylko przy startowej petli jest logo.png widoczne, jak zaczya się kolejna petla znika i pojawie dopiero przed ostatnim zdjęciem. Mam taki kod:
HTML:

<div id="top">
 
                <div id="animacja" class="shadow">
                    <img src="img/animacja/test1.jpg">
                     <img src="img/animacja/test2.jpg">
                     <img src="img/animacja/test3.jpg">
                     <img src="img/animacja/test4.png">
                     <div class="logo">
                        <img src="img/logo.png" />
                    </div>
                </div>
            </div>

CSS:

 div#top
    {
        color:black;
        padding:15px;
        text-align: center;
        min-height:300px;
        max-height: 300px;
    }
        @-webkit-keyframes animacjaFadeInOut {
         0% {
           opacity:1;
         }
         17% {
           opacity:1;
         }
         25% {
           opacity:0;
         }
         92% {
           opacity:0;
         }
         100% {
           opacity:1;
         }
        }
 
        @-moz-keyframes animacjaFadeInOut {
         0% {
           opacity:1;
         }
         17% {
           opacity:1;
         }
         25% {
           opacity:0;
         }
         92% {
           opacity:0;
         }
         100% {
           opacity:1;
         }
        }
 
        @-o-keyframes animacjaFadeInOut {
         0% {
           opacity:1;
         }
         17% {
           opacity:1;
         }
         25% {
           opacity:0;
         }
         92% {
           opacity:0;
         }
         100% {
           opacity:1;
         }
        }
 
        @keyframes animacjaFadeInOut {
         0% {
           opacity:1;
         }
         17% {
           opacity:1;
         }
         25% {
           opacity:0;
         }
         92% {
           opacity:0;
         }
         100% {
           opacity:1;
         }
        }
 
        #animacja {
            position:relative;
            height:300px;
            width:900px;
            border: 6px solid #fff;
            -webkit-border-radius: 50px;
            -khtml-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            margin:auto;
            overflow:hidden;/*przycinanie zdjęcia do diva*/
        }
        #animacja img {
            position: absolute;
            margin: auto;
            top: 0;
            left: -12px;
            right: 0;
            bottom: 0;;
        }
 
        #animacja img {
          -webkit-animation-name: animacjaFadeInOut;
          -webkit-animation-timing-function: ease-in-out;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-duration: 8s;
 
          -moz-animation-name: animacjaFadeInOut;
          -moz-animation-timing-function: ease-in-out;
          -moz-animation-iteration-count: infinite;
          -moz-animation-duration: 8s;
 
          -o-animation-name: animacjaFadeInOut;
          -o-animation-timing-function: ease-in-out;
          -o-animation-iteration-count: infinite;
          -o-animation-duration: 8s;
 
          animation-name: animacjaFadeInOut;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
          animation-duration: 8s;
        }
        #animacja img:nth-of-type(1) {
          -webkit-animation-delay: 6s;
          -moz-animation-delay: 6s;
          -o-animation-delay: 6s;
          animation-delay: 6s;
        }
        #animacja img:nth-of-type(2) {
          -webkit-animation-delay: 4s;
          -moz-animation-delay: 4s;
          -o-animation-delay: 4s;
          animation-delay: 4s;
        }
        #animacja img:nth-of-type(3) {
          -webkit-animation-delay: 2s;
          -moz-animation-delay: 2s;
          -o-animation-delay: 2s;
          animation-delay: 2s;
        }
        #animacja img:nth-of-type(4) {
          -webkit-animation-delay: 0;
          -moz-animation-delay: 0;
          -o-animation-delay: 0;
          animation-delay: 0;
        }
        div#animacja div.logo
        {
            background-repeat:no-repeat;
        }
edytowany 1x, ostatnio: dzek69, 2014-12-15 22:49

Pozostało 580 znaków

2014-12-15 22:52
0

takie przykłady w formie suchego kodu nic nie mówią. na zagranicznych forach normą jest wrzucanie kodu "live" na jsfiddle, jsbin, codepen. wrzuć swój przykład na jeden z wymienionych serwisów, będzie łatwiej


Pozostało 580 znaków

2014-12-16 11:01
0

Chcę aby to fioletowe kółko z % było na wierzchu tak jak przy starcie skryptu. I dlaczego w chromie nie przycina do border-radius.

http://jsfiddle.net/da89yqn4/

edytowany 1x, ostatnio: slawekh666, 2014-12-16 11:03

Pozostało 580 znaków

2014-12-16 11:52
0

poczytaj o z-index. te procenty to najlepiej pozycjonowac absolutem i potem wysrodkowac. a za pomoca z-index musi potworzyc wartswy. rogi bylo wdac bo dales ramke, ale w kolo rami jest przezroczyste wiec rogi sie pokazywaly. dodalem do top kolor tla i zdjecia znikajac pod tym tlem. dla wizualizacji wez sobie jakies zdjecie poloz na stole a z kartki papieru wytnij kolo. i reszta akrtki przykrywa ci rogi zdjecia, a jesli wytniesza sama ramke to rogi zdjecia beda wystawac poza kolko. tak jest i tu

a tu rozwiazanie:http://jsfiddle.net/da89yqn4/1/

Pozostało 580 znaków

2014-12-16 13:45
0

Ale jak wrzucę background to zakrywa animację zdjęć w tle. Co do przycinania to nie działa w chromie i nie wiem jak z operą bo zapomniałem przetestować w firefox i IE działa prawidłowo. W chromi jak wrzucam zdjęcie do diva i pozaokrąglam rogi też ładnie przycina, tylko sypie się przy dodaniu animacji animacji. A u Ciebie przynajmniej na chromie jest widoczny tylko border i % migający, a powinien być widoczny cały czas tak jak zwykłe zdjęcie wrzucone, z-index z tą animacją też nie działa.

Pozostało 580 znaków

2014-12-16 14:13
0

no bo logo jest w divie z animacja, dlatego miga, bo sie animuje, skoro background zakrywa to mowilem bys poczytal o z index a wtedy bys wpadl by za pomoca z -index wypchnac zdjeca NA gore tla => http://jsfiddle.net/da89yqn4/2/

Pozostało 580 znaków

2014-12-16 15:49
0

Dzięki, czytałem ale nie wpadłem żeby wykorzystać na tło.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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