Diskuze: Animace - problém

HTML a CSS HTML a CSS Animace - problém American English version English version

Avatar
Vojtěch Jelínek (Slepice1):

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
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
David Čápka:

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

Nahoru Odpovědět 5.6.2013 10:47
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Honza Bittner:

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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Honza Bittner:

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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Michal Žůrek (misaz):

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  +2 5.6.2013 14:22
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
David Čápka:

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

Nahoru Odpovědět 5.6.2013 15:22
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Jistě, ale jak si můžeš všimnout tak má Vojtěch Jelínek (Slepice1) 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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

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

Nahoru Odpovědět 5.6.2013 15:28
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Vojtěch Jelínek (Slepice1):

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
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Michal Žůrek (misaz):

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 :D

Nahoru Odpovědět  +1 5.6.2013 19:41
Nesnáším {}, proto se jim vyhýbám.
Avatar
Vojtěch Jelínek (Slepice1):

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
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Michal Žůrek (misaz):

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  +2 5.6.2013 20:22
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Michal Žůrek (misaz):

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

Nahoru Odpovědět 5.6.2013 20:23
Nesnáším {}, proto se jim vyhýbám.
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.