CSS Animacje i znacznik <div>

0

Czy to jest właściwy dział na zagadnienia o CSS?

Zaczynam bawić się animacjami CSS.
Zauważyłem, że w przykładach np. w tym...

<!DOCTYPE html>
<html>
<head>
<style> 

div {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:708px; top:0px;}
  50%  {background-color:blue; left:0px; top:0px;}
  75%  {background-color:green; left:708px; top:0px;}
  100% {background-color:red; left:0px; top:0px;}
}

</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Jeśli zmienię nazwę znacznika DIV na jakikolwiek inny?
albo jeśli deklaracje animacji nie będę pakował w DIV
tylko w jakąś ID albo CLASS (# albo .) to animacja nie działa.
Po prostu nic nie wyświetla się na ekranie.

Czy mógłby ktoś wyjaśnić ten aspekt?
Dzię…uprzejmie. Pozdrawiam serdecznie.

Kuba

0

Dobra. Znalazłem solucję.
Div musi zostać, ale można klasę dołączyć do nazwy div,

div.nazwa {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:-290px; top:0px;}
  25%  {background-color:yellow; left:290px; top:0px;}
  50%  {background-color:blue; left:-290px; top:0px;}
  75%  {background-color:green; left:290px; top:0px;}
  100% {background-color:red; left:-290px; top:0px;}
}

<div class="nazwa"></div>
1
Jakub Prażmowski napisał(a):

Dobra. Znalazłem solucję.
Div musi zostać, ale można klasę dołączyć do nazwy div,

div.nazwa {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:-290px; top:0px;}
  25%  {background-color:yellow; left:290px; top:0px;}
  50%  {background-color:blue; left:-290px; top:0px;}
  75%  {background-color:green; left:290px; top:0px;}
  100% {background-color:red; left:-290px; top:0px;}
}

<div class="nazwa"></div>

Noo, nie prawda. Z samą klasą też musi działać.

0
Jakub Prażmowski napisał(a):

No i co ja Ci poradzę? Istnieją na tym świecie, że w mojej przeglądarce FireFox, się filozofom nie śniło.

Jakub Prażmowski napisał(a):

Na chłopski rozum powinno działać... a nie działa.

Czekaj, czekaj. Jak ustawiałeś tą klasę to napisałeś ją z kropką tak? Napisałeś .nazwa { - klasa? Nie napisałeś nazwa { - tag, tak?

.nazwa { # tak ma być
  width: 20px;
  height: 20px;
  animation-name: example;
}
0

Coś źle napisałeś, bo powinno działać. Inaczej nikt by z Firefoksa nie korzystał, bo 99% stron w necie by się źle wyświetlało.

Tu masz przykład, że działa sama klasa: https://jsfiddle.net/65zn7dyv/

div.nazwa

A ten zapis z kolei jest mało elastyczny, bo musi być div (przy samej klasie masz tę wolność, że ustawiasz sobie znacznik, jaki chcesz). No i zwiększasz niepotrzebnie specyficzność https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

nie doklejało się do DIVa ani do innego... a powinno wiem

Polecam w takich wypadkach sprawdzić dev tools w przeglądarce i zobaczyć, które reguły się aplikują do których elementów. Może np. reguła się zaaplikowała, ale została nadpisana przez jakąś deklarację (to jedna z możliwości).

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