Efekt zmiany tła/ czy przylotu elementu?

Question

Cześć mógłby mi ktoś wytłumaczyć, czy ten efekt https://youtu.be/UoBLhI-FgBI jest efektem transform: translate, czy może transition: background?

Answer 1

Według mnie to tranzycja na property height , ale pewności nie mam.

Jeśli Ty zrobiłeś ten filmik, to czemu po prostu nie sprawdzisz w devtoolsach jak działa ta animacja, albo nie udostępnisz strony, żeby ktoś inny mógł pomóc Ci to sprawdzić?

Answer 2

Jest to chyba pseudoelement/div ktory jest pozycjonowany absolutnie do tej karty javascript, i wtedy gdy uzyska stan hover to  pseudoelement/div uzyskuje 100% height z 20% i tak dziala ten efekt mi sie wydaje np.
.card:hover ~ .background-effect {height: 100%}, tutaj szybki przykład https://codepen.io/Fiji08/pen/yLzLxdp

Answer 3

Według Mnie:

• transition: height  => div { position: absolute; }
• zmiana koloru napisów
• np. <progress>  => opacity: 0;

 

przykład

<div class="card">
  <div class="background-effect"></div>
  <div class="js-logo"><span>JS</span></div>
  <div class="course-length">9 godzin 20 minut</div>
  <div class="description-container">
    <p class="course-title">Kurs JavaScript</p>
    <p><hr></p>
    <p>Pozostało 7 godzin 6 minut</p>
    <p><progress max="100" value="20"></progress></p>
  </div>
  <button>Kontynuuj</button>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgba(250,250,250,0.9);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  position: relative;
  width: 450px;
  height: 280px;
  border-radius: 0.5em;
  box-shadow: 0 4px 2px 2px rgba(242,242,242,1); 
  cursor: pointer;
  overflow: hidden;
  background-color: white;
  display: grid;
  place-items: center;
}
.card .background-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.4em;
  background-color: rgb(237 218 86);
  transition: height 0.45s ease-out;
}
.card .js-logo {
  position: absolute;
  left: 1em;
  top: 1em;
  width: 3em;
  height: 3em;
  border-radius: 100%;
  background-color: rgb(247 219 35);
  overflow: hidden;
}
.card .js-logo span {
  position: absolute;
  right: -0.02em;
  bottom: 0.2em;
  font: 700 2em/1.1 "Segoe UI", Arial, sans-serif;
}
.card .course-length {
  position: absolute;
  border-radius: 1em;
  top: 1.5em;
  right: 1.5em;
  background-color: white;
  color: black;
  font: 700 0.8em/1 "Segoe UI", Arial, sans-serif;
  padding: 0.25em 0.5em;
}
.card .description-container {
  position: relative;
  width: 85%;
  height: 80%;
  margin-top: 2em;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.card .description-container p {
  margin: 0.25em 0;
  color: rgb(167,167,167);
  font: 400 1em/1 "Segoe UI", Arial, sans-serif; 
  transition: color 0.25s 0.05s ease-out;
}
.card .description-container p.course-title {
  color: black;
  font: 700 1.8em/1 "Segoe UI", Arial, sans-serif;
  transition: color 0.25s 0.05s ease-out;
}
.card .description-container hr {
  border: 0;
  height: 2px;
  width: 1.25em;
  background-color: rgb(227,227,227);
}
.card .description-container progress {
  width: 100%;
  opacity: 1;
  height: 0.5em;
  border: 0;
  transition: opacity 0.1s ease-out;
}
.card .description-container progress::-webkit-progress-value {
  background-color: rgb(18,178,148);
}
.card button {
  position: absolute;
  right: 1em;
  bottom: 1em;
  color: white;
  border: 2px solid white;
  border-radius: 2em;
  padding: 0.8em;
  margin: 0;
  font: 700 1.2em/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  text-transform: uppercase;
  background-color: transparent;
}

.card:hover .background-effect {
  height: 100%;
}
.card:hover .description-container p {
  color: white;
}
.card:hover .description-container progress {
  opacity: 0;
}