Diskuze: Animace - problém

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

Aktivity

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:4.6.2013 20:33

Nevím proč to nefunguje srovnával jsem to s tutoriálem tady, ale nenašel jsem chybu.

<!DOCTYPE html>
<html lang="cz-cs">

<head>
<meta charset="utf-8">
<title>Tlačítko Devbook</title>
<style type="text/css">
@keyframes shadow
{
    0% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 30px #45B445;}
    33% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 0px #45B445;}
    66% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 0px #30AC30, 0px 0px 4px 0px #45B445;}
    100% {box-shadow: 0px 0px 0px 0px #19A319, 0px 0px 0px 0px #30AC30, 0px 0px 0px 0px #45B445;}
}

.buttonStyle {
    width: 200px;
        height: 75px;
    background-color: #009900;
    border: none;
    margin:30px;
    border-radius:20px;
    box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 30px #45B445;
    font-size: 30px;

}


.buttonStyle:hover {
    background-color:#0033CC;
    box-shadow: 0px 0px 4px 10px #1947D1, 0px 0px 4px 20px #3059D6, 0px 0px 4px 30px #456ADA;
    cursor: pointer;
    animation: shadow 3s;
}
.buttonStyle:active {

}

</style>
</head>

<body>
<button class="buttonStyle">Technica</button>
</body>
</html>

Odpovědět

4.6.2013 20:33

Neaktivní uživatelský účet

David Hartinger

Vlastník

David Hartinger:5.6.2013 10:47

V Chrome musíš použít @-webkit-keyframes a -webkit-animation.

Nahoru Odpovědět

5.6.2013 10:47

New kid back on the block with a R.I.P

Honza Bittner

Tvůrce

Honza Bittner:5.6.2013 14:12

Přesně jak píše sdraco, musíš použít prefix na ANIMATION ... tzn. :

o-
moz-
webkit-

(dává se i jedno bez prefixu)

Mělo by ti to jít. Kdyžtak napiš.

Nahoru Odpovědět

5.6.2013 14:12

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

Honza Bittner

Tvůrce

Honza Bittner:5.6.2013 14:13

Jestli se s tím nechceš psát, tak jsem objevil stránku http://prefixmycss.com/, která ti vše potřebné udělá

Nahoru Odpovědět

5.6.2013 14:13

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

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.6.2013 14:22

K tomuto se nepoužívají animace, ale přechody.

Jinak měly bychom výt úplně přesní tak to jsou vendor prefixes.

Nahoru Odpovědět

5.6.2013 14:22

Honza Bittner

Tvůrce

Honza Bittner:5.6.2013 14:36

Avšak podle té animace vidíš že chce aby se po šáhnutí udělal stín a pak pomalu zmizel ... ne ?

A to s přechodem neuděláš ... nebo se pletu ?

Nahoru Odpovědět

5.6.2013 14:36

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

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.6.2013 15:20

přechod ti dá "animaci" vlastností mezi normalním a třeba :hover

Takže ten stín uvede v :hover a do normálního dá:

transition: shadow 1s ease-out;
/*... vendor prefixes ...*/

Alespoň si myslim že to tak je.

Nahoru Odpovědět

5.6.2013 15:20

David Hartinger

Vlastník

David Hartinger:5.6.2013 15:22

Je to tak, přechod je vlastně zjednodušená animace, kde jsou jen 2 keyframes.

Nahoru Odpovědět

5.6.2013 15:22

New kid back on the block with a R.I.P

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.6.2013 15:24

no máš to jak v powerpointu.
Animace = kdekoliv na snímku.
Přechod = pouze mezi snímky.

Nahoru Odpovědět

5.6.2013 15:24

Honza Bittner

Tvůrce

Honza Bittner:5.6.2013 15:26

Jistě, ale jak si můžeš všimnout tak má Neaktivní uživatel v animaci dané

@keyframes shadow
 {
     0% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 30px #45B445;}
     33% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 20px #30AC30, 0px 0px 4px 0px #45B445;}
     66% {box-shadow: 0px 0px 4px 10px #19A319, 0px 0px 4px 0px #30AC30, 0px 0px 4px 0px #45B445;}
     100% {box-shadow: 0px 0px 0px 0px #19A319, 0px 0px 0px 0px #30AC30, 0px 0px 0px 0px #45B445;}
 }

tzn. tlačítko je normální a po najetí myši dostane stín který postupně mizí ...

možná že udělal chybu v tomto a proto mu to dělá neplechy ...

Editováno 5.6.2013 15:27

Nahoru Odpovědět

5.6.2013 15:26

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

Honza Bittner

Tvůrce

Honza Bittner:5.6.2013 15:28

Hlavní chybou tázajícího je, že nám neřekl co mu blbne ...

Nahoru Odpovědět

5.6.2013 15:28

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:5.6.2013 19:21

Nefunguje mi to vůbec, zkusím ty prefixy. Jinak mělo by to fungovat tak že to na začátku má stíny a jeden po druhém zmizí. Jednalo se o spíš takový test animací. A myslím že by přechod nešel použít.

Nahoru Odpovědět

5.6.2013 19:21

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.6.2013 19:41

a ještě jeden dotaz: v jakém prohlížeči děláš?

Ono toiž IE1,2,3,4,5,6,7,8 animace nepodporuje

Nahoru Odpovědět

5.6.2013 19:41

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.6.2013 19:58

Google Chrome

Nahoru Odpovědět

5.6.2013 19:58

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.6.2013 20:07

Super už to funguje, stačilo použít prefixy. Chystá se vůbec nějaké sjednocení?

Nahoru Odpovědět

5.6.2013 20:07

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.6.2013 20:22

ty vendor perfixes by tě měly varovat že používáš nestabilní funkci. Jakmile bude funkce označena za stabilní vendor perfixes této funkci zmizí.

Nahoru Odpovědět

5.6.2013 20:22

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:5.6.2013 20:23

pro chrome se používa vendor perfix -webkit-

Nahoru Odpovědět

5.6.2013 20:23

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 17 zpráv z 17.

Nejčastěji vyhledáváné

Diskuze: Animace - problém