Diskuze: animation

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

adder

Člen

adder:8.9.2014 19:30

Zdravím,

http://jsfiddle.net/8uLk6yb3/4/ mám problém s animation-delay. Nevím, jak to uspořádat tak, aby se každej box zobrazoval postupně. V 0s 1. box, v 1s 2. box a v 2s 3.box. Pokud budete vědět, tak děkuji za radu. Mám s tím celej den problém i každej prohlížeč si to dělá, jak se mu zachce, se mi zdá. :-D Hezkej večer přeji.

Odpovědět

8.9.2014 19:30

I’m going to lay this brick as perfectly as a brick can be laid.

Honza Bittner

Tvůrce

Honza Bittner:8.9.2014 20:05

Nejdříve sem postni tvé verze - nevadí že je to špatně. Poté ti já, či někdo jiný, pravděpodobně poradí, co děláš špatně a navedem tě na správnou cestu.

Nahoru Odpovědět

8.9.2014 20:05

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

adder

Člen

adder:8.9.2014 21:02

http://www.homolamartin.cz/ btw. velká inspirace u tebe snad nevadí )

<body>
   <header>
      <h1>H</h1>
      <span id="m">M</span>
      <p>The whole web presentation is coming soon.</p>

      <div id="social-media">
         <a id="li" href="https://www.linkedin.com/in/homolamartin" target="_blank"><i class="fa fa-linkedin fa-3x"></i></a>
         <a id="fb" href="https://www.facebook.com/martihom1993" target="_blank"><i class="fa fa-facebook fa-3x"></i></a>
         <a id="tw" href="https://twitter.com/martihom1993" target="_blank"><i class="fa fa-twitter fa-3x"></i></a>
      </div>

   </header>

</body>

header {
        text-shadow: 2px 2px 3px rgba(22, 117, 171, .5);
        color: #133a51;
        width: 100%;
}
header > h1 {
        font-size: 15em;
        text-transform: uppercase;
        position: relative;
        -webkit-animation: showH 2s;
    -moz-animation: showH 2s;
    -o-animation: showH 2s;
    animation: showH 2s;
}
@-o-keyframes showH{
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
@-moz-keyframes showH{
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
@-webkit-keyframes showH{
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
@keyframes showH {
        from {top : -600px;
                opacity : 0;}
        to {top : 0;
                opacity : 1;}
}
header > #m {
        font-size: 6em;
        position: relative;
        top: -140px;
        left: -3px;
        text-transform: uppercase;
        -webkit-animation: showM 2s;
    -moz-animation: showM 2s;
    -o-animation: showM 2s;
    animation: showM 2s;
}
@-webkit-keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
@-o-keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
@-moz-keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
@keyframes showM{
        from {left : -600px;
                opacity : 0;}
        to {left : -3px;
                opacity : 1;}
}
header > p{
        position: relative;
        top: -150px;
        font-size: 1.4em;

        -webkit-animation: show 3s;
    -moz-animation: show 3s;
    -o-animation: show 3s;
    animation: show 3s;
}
@-webkit-keyframes show{
        from {opacity : 0;}
        to {opacity : 1;}
}
@-o-keyframes show{
        from {opacity : 0;}
        to {opacity : 1;}
}
@-moz-keyframes show{
        from {opacity : 0;}
        to {opacity : 1;}
}
@keyframes show {
        from {opacity : 0;}
        to {opacity : 1;}
}
div#social-media {
        margin: 0 auto;
        position: relative;
        top: -130px;
}
div#social-media a i.fa {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        display: inline-block;
}
div#social-media {
        -webkit-animation: show 3s;
        -moz-animation: show 3s;
        -o-animation: show 3s;
        animation: show 3s;

        -webkit-animation-delay: 2s;
        animation-delay: 2s;
}
a{
        color: #24272f;
        -webkit-transition: color 0.25s linear;
        -moz-transition: color 0.25s linear;
        -o-transition: color 0.25s linear
        transition: color 0.25s linear;
}

a#li:hover,
a#li:focus,
a#li:active {
        color: #1884bb;
}
a#fb:hover,
a#fb:focus,
a#fb:active {
        color: #3f5c9a;
}
a#tw:hover,
a#tw:focus,
a#tw:active {
        color: #55acee;
}

Nahoru Odpovědět

8.9.2014 21:02

I’m going to lay this brick as perfectly as a brick can be laid.

adder

Člen

adder:8.9.2014 21:04

ale tu mi to funguje, ale chtěl bych, aby se ikony sociálních medií zobrazovaly postupně.

Nahoru Odpovědět

8.9.2014 21:04

I’m going to lay this brick as perfectly as a brick can be laid.

Honza Bittner

Tvůrce

Honza Bittner:8.9.2014 22:07

Nebude lepší to udělat v JS? CSS na to vhodné moc není, tím neříkám že to nelze, jelikož tam to je spíše pro účely jako hover etc...

Nahoru Odpovědět

8.9.2014 22:07

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

adder

Člen

adder:8.9.2014 22:29

Netuším, jestli to bude lepší(možná jednodušší).. ale chtěl jsem zkusit přes CSS jsem dnes viděl tohle. http://stuffandnonsense.co.uk/…dmanimation/ ještě se trochu pohrabu v kódu a zkusím to znova. ale díky, že ses na to mrknul

Nahoru Odpovědět

8.9.2014 22:29

I’m going to lay this brick as perfectly as a brick can be laid.

Honza Bittner

Tvůrce

Honza Bittner:8.9.2014 22:57

Né tak jakože víš co - to JS by bylo prostě vhodnější použít a je pořád více jisté, že to půjde na více PC než u CSS3..

Avšak jestli se nepletu, tak je nějaká vlastnost pro nastavení začátku animace, respektive zpoždění od 0... zkus to pogooglit.

Nahoru Odpovědět

8.9.2014 22:57

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.9.2014 12:12

na oneskorenie je animation-delay, či?

Nahoru Odpovědět

9.9.2014 12:12

Neaktivní uživatelský účet

adder

Člen

adder:9.9.2014 13:52

ano, použil jsem to zde http://jsfiddle.net/…/8uLk6yb3/5/ , ale nefunguju je to tak, jak má. nejspíš špatně zapsané )

Nahoru Odpovědět

9.9.2014 13:52

I’m going to lay this brick as perfectly as a brick can be laid.

Honza Bittner

Tvůrce

Honza Bittner:9.9.2014 14:54

Animaci aj delay máš dobře, avšak ty máš na počátku - načtení dokumentu - pořád ten div viditelný, poté nastane animace, která začíná od opacity 0, tudíž se ti zneviditelní a postupně přechází na opacity 1, kde už máš plnou viditelnost.

Musíš to tedy upravit tak, že divu nastavíš opacity 0 a ještě přidáš, že div po animaci zůstane tak, jak skončila...

Nahoru Odpovědět

9.9.2014 14:54

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

alfonz

Člen

alfonz:9.9.2014 16:04

Nejjednodušeji to uděláš tak, že postupně ty boxy budeš zobrazovat(změna display z none na display). A všem těm boxům dáš vlastnost

transition: 2s all;

Nahoru Odpovědět

9.9.2014 16:04

lmao

adder

Člen

adder:9.9.2014 17:22

hehe, díky za navedení. už to jede - http://jsfiddle.net/…/8uLk6yb3/9/

Nahoru Odpovědět

9.9.2014 17:22

I’m going to lay this brick as perfectly as a brick can be laid.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.

Nejčastěji vyhledáváné

Diskuze: animation