Omówienie kodu html i css

pytanie zadane 29 sierpnia 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)

Czy mógłby ktoś omówić ten kod

<html lang="pl">
 
<head>
     
    <meta charset="utf-8"><meta>
     
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge, chrom=1" />
     
    <title>strona główna</title>
     
    <link rel="stylesheet" href="styl.css" type="text.css"/>
     
</head>
 
<body>
 
        <p>Zmiana koloru</p>
 <span>Zmiana koloru</span>
 
 
 
</body>
</html>

body
{
    background-color:gray;
 
}
p
{
animation: color 2s linear infinite;
-webkit-animation: color 2s linear infinite;
}
span
{
animation: kolor 1s linear infinite;
-webkit-animation: kolor 1s linear infinite;
}
/* rozwiązanie 1. */
@keyframes color
{
  0%{color:white;}
  50%{color:red;}
  100%{color:white;}
}
@-webkit-keyframes color
{
  0%{color:white;}
  50%{color:red;}
  100%{color:white;}
}
/* rozwiązanie 2. */
@keyframes kolor
{
  0%{color:white;}
  100%{color:red;}
}
@-webkit-keyframes kolor
{
  0%{color:white;}
  100%{color:red;}
}

Chodzi mi przede wszystkim o omówienie css.

2 odpowiedzi

odpowiedź 29 sierpnia 2015 przez Mieszko I Stary wyjadacz (10,980 p.)
wybrane 29 sierpnia 2015 przez Paweł123

Najlepsza

Jest stworzona animacja dla znacznika p i span.

Animacja dla znacznika p wykonuje się w nieskończoność i zmieniają się kolory:

0 sekund: kolor tekstu jest biały
1 sekunda: kolor tekstu zmienił się na czerwony
2 sekunda: kolor tekstu zmienił się na biały

Animacja dla znacznika span wykonuje się także w nieskończoność (infinite):

0 sekund: Kolor tekstu jest biały
1 sekunda: Kolor tekstu zmienił się na czerwony

Ale po kolei:

animation: color 2s linear infinite;

Oznacza to, że wywoływana jest animacja "color". Trwa ona dwie sekundy, czas trwania tej animacji jest stały i wykonuje się ona automatycznie.

@keyframes color
{
  0%{color:white;}
  50%{color:red;}
  100%{color:white;}
}

Jest to definicja animacji.

Te animacje i wywołania z przedrostkiem "-webkit-" są przeznaczone dla takich przeglądarek jak Google Chrome, Opera i Safari.

Pozdrawiam.

komentarz 29 sierpnia 2015 przez Anonim Mądrala (6,000 p.)

Drugie rozwiązanie w sekundę przechodzi do czerwieni, a potem od początku.

komentarz 29 sierpnia 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

A sorry. Zagapiłem się. Już poprawiam.

komentarz 29 sierpnia 2015 przez Anonim Mądrala (6,000 p.)

Tak się składa, że jest to moje rozwiązanie :)

komentarz 29 sierpnia 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

Wiem. Chciałem jednak podać tutaj rozwiązanie, a nie odsyłać do internetu. Nie wiem czemu, ale zawsze wolę mieć rozwiązanie podane w odpowiedzi na pytanie,

komentarz 29 sierpnia 2015 przez Anonim Mądrala (6,000 p.)
edycja 29 sierpnia 2015 przez Anonim

Bardzo dobre wytłumaczenie kodu :)

odpowiedź 29 sierpnia 2015 przez Anonim Mądrala (6,000 p.)

Podałem linka z kursem: http://kodcss.pl/kurs-css/lekcje/dzial-1/keyframes-selektory-czasu-animacji

Niepotrzebnie tworzyłeś nowe pytanie, mogłeś napisać to w komentarzu.

komentarz 29 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

Mam pytanie: czy @keyframes wyparło np. @-webkit-keyframes? Jak się dobrze orientuję, to tylko to pierwsze jest ustandaryzowane.

komentarz 29 sierpnia 2015 przez Anonim Mądrala (6,000 p.)

Nie wiem, w kursie, z którego się uczyłem było -webkit-, nie sprawdzałem tego.

EDIT: Na MDN jest z webkit: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

komentarz 30 sierpnia 2015 przez Czort Nałogowiec (32,500 p.)

Bez webkit animacje się sypią na niektórych przeglądarkach, np androidowej.

komentarz 30 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

Czyli najlepiej wpisywać zawsze kilka wersji, czyli bez przedrostka, z -webkit-, -o- i -ms-? O dziwo na MDN są wszystkie wersje oprócz -ms-. Czyli IE/Edge obsługuje standard CSS jako jedyny?!