Brak płynności w animacji - transition

pytanie zadane 4 września 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)

Witam, chciałbym zapytać jaki wpływ mają własciwości: top, left etc. do transition w css. Poniżej w kodzie mam za komentowane left:0 w button span, bez tej właściwości napis buy now porusza się bardzo szybko, z tego co kojarzę przyczyną jest, że left ma domyślnie auto, nie mogę zrozumieć natomiast jak to się przekłada na płynność, w przypadku użycia left:0 napis idzie płynnie do lewej strony po najechaniu. Poniżej link:

https://jsfiddle.net/m86bksnv/

2 odpowiedzi

odpowiedź 4 września 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 4 września 2022 przez jasper93

Najlepsza

Jeśli nie ustawisz wartości dla left/right/top/bottom, to automatycznie ustawiane jest auto. Dla tej wartości tranzycje mogą działać nieprzewidywalnie. Więcej na ten temat możesz poczytać tutaj.

komentarz 4 września 2022 przez jasper93 Obywatel (1,310 p.)

Ok, dziękuje za rzetelną odpowiedź, zapiszę sobie stronkę, bo wydaje mi się godnym źródłem informacji.

odpowiedź 5 września 2022 przez VBService Ekspert (253,420 p.)
edycja 5 września 2022 przez VBService

Moim zdaniem, dla animacji "przesuwania" elementów, lepiej się sprawdza transform: translate

Difference between Translate & Position Relative

The transform property will use hardware acceleration where possible so using translate() over position will see performance benefits if any animations or transitions are also being used on the element.

przykład

<button>
  <span>buy now</span>
  <span>great deal!</span>    
</button>

* {
  margin: 0;
  padding: 0;
}

button {
  position: absolute;
  bottom: 15vh;
  right: 15vw;
  border: 2px solid black;
  width: 360px;
  height: 100px;
  background-color: #fff;
  font-size: 40px;
  text-transform: uppercase;
  font-family: roboto condensed;
  overflow: hidden;
  cursor: pointer;
}

button span {
  position: relative;
  top: 0;
  /* left: 0; */
  display: block;
  white-space: nowrap;
  line-height: 100px;
  transition: transform 550ms 100ms cubic-bezier(0.5,-0.8,0.25,1.4);
}

span:nth-child(2) {
  top: -100%;
  transform: translatex(150%);
}

button:hover span:nth-child(1) {
  transform: translatex(-150%);
}
button:hover span:nth-child(2) {
  transform: translatex(0);
}