Animacja strzałki, brak efektu animacji

pytanie zadane 19 stycznia 2019 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)

efekt animacji css
@keyframes arrow {
        0% {
            transform: translateY(-80px)
        }
        50%  {
            transform: translateY(0px)
        }
        100% {
            transform: translateY(80px)
        }
    }

classa strzałki css

.fa-angle-down {
    animation: arrow 1.6s infinite 
    linear;
}

html fragment kodu

 <header>
     <nav><i class="fa fa-bars"></i></nav>
    <hgroup>
     <h1>Losuj Cytat!</h1>
        <h3>Twój cytat na dziś.</h3><span><h4>Jeden cytat na jeden dzień.</h4></span>
    </hgroup>
     <img src="img/1.png">
     <div id="arrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
 </header>

Czy ktoś widzi gdzieś jakiś błąd ?

komentarz 19 stycznia 2019 przez pablop76 VIP (123,540 p.)

Ale to działa!!!

2 odpowiedzi

odpowiedź 19 stycznia 2019 przez kryst.4 Początkujący (350 p.)
edycja 19 stycznia 2019 przez kryst.4

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
#arrow {
  animation: arrow 1.6s infinite linear ;
}

@keyframes arrow {
   0%   {
      transform: translateY(-80px)
        }
   50%  {
      transform: translateY(0px)
        }
   100% {
      transform: translateY(80px)
        }
}
</style>
<header>
    <nav><i class="fa fa-bars"></i></nav>
   <hgroup>
    <h1>Losuj Cytat!</h1>
    <h3>Twój cytat na dziś.</h3><span><h4>Jeden cytat na jeden dzień.</h4></span>
   </hgroup>
    <img src="img/1.png">
    <div><i class="fa fa-angle-down" aria-hidden="true" id="arrow"></i></div>
</header>
</html>

A mi działa. Dodałem ID bezpośrednio do strzałki.

komentarz 19 stycznia 2019 przez pablop76 VIP (123,540 p.)

Używanie id do stylowania nie jest optymalne

komentarz 19 stycznia 2019 przez kryst.4 Początkujący (350 p.)

Ale działa. Choć kod napisany przez pana Grzegorza też jest poprawny.

komentarz 19 stycznia 2019 przez pablop76 VIP (123,540 p.)

Style inline tym bardziej, !important również, użycie do animacji biblioteka na pewno też zadziała

odpowiedź 19 stycznia 2019 przez xmentor Nałogowiec (49,520 p.)
edycja 19 stycznia 2019 przez xmentor

Wrzuciłem kod na codepen-a i wygląda, że wszystko działa, na wszelki wypadek usuń enter pomiędzy " infinite" a "linear".

komentarz 20 stycznia 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)
edycja 20 stycznia 2019 przez Grzegorz Mikina

Dobrze przy ustawieniu animacji w style w kodzie html dla diva arrow działa, jednak chcę żeby animacja dotyczyła samej strzalki w środku tego diva. I u mnie niestety nie działa, przesyłam cały kod.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Twój cytat!</title>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/arkusz.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,900&amp;subset=latin-ext" rel="stylesheet">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
 <header>
     <nav><i class="fa fa-bars"></i></nav>
    <hgroup>
     <h1>Losuj Cytat!</h1>
        <h3>Twój cytat na dziś.</h3><span><h4>Jeden cytat na jeden dzień.</h4></span>
    </hgroup>
     <img src="img/1.png">
     <div id="arrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
 </header>
     <main><arrow></arrow></main>

</body>

</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;

}
html {
    font-size: 10px;
}
header {
    height: 100vh;
    width: 100%;
    background-color: yellow;
    position: fixed;
    overflow-x: hidden;
    top: 0;
    left: 0;
    overflow-x: hidden;
    font-family: 'Lato';
    z-index: 1;
}
header img {
    width: 20rem;
    height: 20rem;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -100px; /* połowa szerokości */
    margin-top: -100px;  /* połowa wysokości */
}
main {
    height: 100vh;
    background-color: #222;
    color:#fff;
    margin-top: 100vh;
    position: relative;
    z-index: 2;
}
header nav {
    position: absolute;
    right:7%;
    top:7%;
    font-size:4rem;
}
header hgroup {
    position: absolute;
    top:20%;
    left:10%;
}
header hgroup h1 {
    font-size: 4rem;
}
header hgroup h3 {
    font-size: 2rem;
}
#arrow {
    width: 64px;
    height: 64px;
    border: 3px solid black;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    font-size: 5rem;
    text-align: center;
    text-shadow: 0px -15px 0 black, 0px 15px 0 black;
    overflow: hidden;
    transition: 3s ease;
}

#arrow:hover {
    background-color:black;
    color:yellow;
    text-shadow: 0px -15px 0 yellow, 0px 15px 0 yellow;
}
.fa-angle-down {
    animation: arrow 1.6s infinite linear;
}

@media (orientation: portrait) {
    h3 span::after {
        content: '/n';
        white-space: pre;
    }
}
@media (orientation: landscape) {
    header img {
    display:none;
    }
}
@media(max-width:285px ){
    header img{
    display:none;
    }
    header nav{
    display:none;
        
}

@media(min-width:585px )
{ header img{
    display:none;
    }
}
    @media  (min-width: 600px) {
        header img{
            display:none;
        }
    }
    
@keyframes arrow {
        0% {
            transform: translateY(-80px)
        }
        50%  {
            transform: translateY(0px)
        }
        100% {
            transform: translateY(80px)
        }
    }