transition-dziwne zachowanie elementu

pytanie zadane 19 sierpnia 2020 w HTML i CSS przez Milencja Nowicjusz (130 p.)

Cześć!

Dopiero uczę się na własną rękę, robić proste strony internetowe, więc proszę o wyrozumiałość jeśli pytanie jest banalne :)

Otóż robię animację strzałki, która dzięki hover , po najechaniu zmienia kolor. Kiedy ustawiam transition, czyli ustalam czas i sposób zmiany, pojawia się problem.

Mianowicie odświeżając stronę po zapisaniu linijki kodu z transition:

strzałka zamiast być w tym samym miejscu, wykonuje jakby powolne pojawianie się od prawej stronie i jakby wyrasta w kierunku miejsca docelowego, gdzie od początku powinna być. i dalej po najechaniu kursorem zachowuje się już tak jak powinna.

Będę wdzięczna za pomoc, na dole wstawiam kod :)

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}
html {
    font-size: 10px;
}
header {
    height: 100vh;
    width: 100%;
    background-color: darkcyan;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    z-index: 1;

}
main {
    height: 100vh;
    background-color: darkgrey;
    margin-top: 100vh;
    position: relative;
    z-index: 2;
}
header img {
    position: absolute;
    bottom: 50px;
    height: 60vh;
    left: 50%;
    transform: translateX(-50%);
}
header nav {
    position: absolute;
    right: 8%;
    top: 5%;
    font-size: 4rem;
}
header hgroup {
    position: absolute;
    top: 16%;
    left: 12%;
}
header h1 {
    font-size: 4rem;
}
header h3{
    font-size: 2rem;
    font-weight: 300;
}
#arrow {
    width: 50px;
    height: 50px;
    border: 5px solid white;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%; 
    font-size: 5rem;
    text-align: center;
    text-shadow: 0 -8px 0 black, 0 -18px 0 black;
    overflow: hidden;
    transition: 1s;
}
#arrow:hover {
    text-shadow: 0 -8px 0 white, 0 -18px 0 white;
    color: white;
    border-color: black;
}

@media (orientation: portrait) {
    h3 span::after {
        content: '\A';
        white-space: pre;
    }
}
@media (max-width: 320px) {
    header h1 {
        font-size: 2.5rem;
    }
    header h3 {
        font-size: 1.8rem;
    }
    
}
@media (min-width: 1024px) {
    header h1 {
        font-size: 8rem;
    }
    header h3 {
        font-size: 6rem;
    }
    #arrow {
        width: 70px;
        height: 70px;
        font-size: 7rem;
    }
}

komentarz 19 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż proszę jeszcze kod HTML, żeby można było to przetestować.

komentarz 19 sierpnia 2020 przez Milencja Nowicjusz (130 p.)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>PIERWSZA STRONA INTERNETOWA</title>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <header>
   <nav><i class="fa fa-bars" aria-hidden="true"></i>
   </nav>
   <hgroup>
    <h1>Milena Pieńkosz</h1>
    <h3><span> Robię pierwszą stronę internetową. </span>Idzie mi świetnie! </h3>
   </hgroup>
   <img src="IMG/52d8e768-2a9a-4826-bd08-56d363775598.jpg">
   <div id="arrow"> <i class="fa fa-angle-down" aria-hidden="true"></i>
 </div>
 </header>
 <main>
     
 </main>
</body>
</html>

2 odpowiedzi

odpowiedź 19 sierpnia 2020 przez VBService Ekspert (253,420 p.)
edycja 20 sierpnia 2020 przez VBService

Efekt ten się pojawia ponieważ masz w #arrow ustanowione w ten sposób: transition: 1s; (ekwiwalent transition: all 1s;) co skutkuje tym, że wszystkie ustawienia, które znajdują się w sekcji:
#arrow { ... } podlegają transition i dla początkowych wartości:

#arrow {
    width: 50px;
    height: 50px;

zachodzi zmian w tym miejscu co powoduje "wywołanie" transition: 1s;

@media (min-width: 1024px) {
    ...
    #arrow {
        width: 70px;
        height: 70px;
        ...
    }
}

ten wpis "informuje", które wartości gdy ulegają zmianie maja być "poddane" transition. [ link ]

#arrow {
    ...
    transition-duration: 1s;
}

zamień na 

#arrow {
    ...
    transition-property: text-shadow, color, border-color;
    transition-duration: 1s;
}

sugerowałem się tym

#arrow:hover {
    text-shadow: 0 -8px 0 white, 0 -18px 0 white;
    color: white;
    border-color: black;
}

komentarz 20 sierpnia 2020 przez Milencja Nowicjusz (130 p.)

Zmieniłam i działa, teraz popracuje żeby to jeszcze zrozumieć! Dziękuję za pomoc :)

komentarz 20 sierpnia 2020 przez VBService Ekspert (253,420 p.)
edycja 20 sierpnia 2020 przez VBService

@Milencja, CSS transition shorthand with multiple properties? np.:

CSS transition shorthand

transition: border-color 1s 0.5s linear;

CSS transition multiple properties

transition-property: border-color;
transition-duration: 1s,
transition-delay: 0.5s;
transition-timing-function: linear;

komentarz 20 sierpnia 2020 przez VBService Ekspert (253,420 p.)
edycja 20 sierpnia 2020 przez VBService

@Milencja, Spróbuj poeksperymentować:

    transition-property: text-shadow, color, border-color;
    transition-duration: 1s, 2s, 3s;

    transition-property: text-shadow, color, border-color;
    transition-delay: 0s, 0s, 1s;
    transition-duration: 1s, 2s, 3s;

    transition-property: text-shadow, color, border-color;
    transition-timing-function: linear, ease-in, ease-out;
    transition-delay: 0s, 0s, 1s;
    transition-duration: 1s, 2s, 3s;

odpowiedź 19 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

Trochę odbiegając od tematu :

1. Postaraj się w takiej sytuacji zamiast wklejać tutaj cały kod wkleić link do czegoś takiego jak codepen - to ułatwi zadanie osobom, które chcą pomóc.

2. Nie styluj po id i nie styluj po czymś takim jak

header img

Pewnie zapytasz dlaczego. Poczytaj o specificity wars i tigh coupling pomiędzy html i css.

3. Nie używaj tagu do dodawania ikonek - i nie oznacza icon tylko italic - to element semantyczny i nie jest do tego przeznaczony

komentarz 19 sierpnia 2020 przez Milencja Nowicjusz (130 p.)

Hej, dziękuje za informację poczytam o tym, jestem narazie na początku drogi :)

co do to taki link wkleiłam z biblioteki Font Awesome, wyszukałam to przez BootstrapCDN- skoro importuje coś stamtąd to chyba nie mogę tego zmieniać-tak przynajmniej myślałam...

komentarz 19 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

Wiem, też kiedyś tak wkleiłem i potem mi zwrócono uwagę - przekazuję dalej :) Możesz zmieniać jak najbardziej - sugerowałbym niesemantyczny - ja tak robię i wszystko działa.

komentarz 19 sierpnia 2020 przez Milencja Nowicjusz (130 p.)

Doceniam i mam nadzieję, że kiedyś ja też komuś będę mogła "zwrócić uwagę" :) Dzięki i pozdrawiam :)

komentarz 20 sierpnia 2020 przez VBService Ekspert (253,420 p.)

Dokładnie jak napisał @Artek, taki wpis powoduje ten sam skutek

<span class="fa fa-bars" aria-hidden="true"></span>

co ten

<i class="fa fa-bars" aria-hidden="true"></i>

Semantyka, czyli jak poprawnie stosować znaczniki HTML

komentarz 20 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

niesemantyczny

Nie chcę się czepiać, ale każdy element opisany w specyfikacji HTML jest semantyczny (inna rzecz, że znaczenie niektórych, jak span czy div, to "brak znaczenia"), a na przykładzie a:

The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

Tak to tylko zostawię: https://blog.comandeer.pl/o-semantyce-slow-kilka.html