To dość proste pytanie, ale nie mogę znaleźć bardzo dobrej dokumentacji dotyczącej właściwości przejścia CSS. Oto fragment kodu CSS:
.nav a
{
text-transform:uppercase;
text-decoration:none;
color:#d3d3d3;
line-height:1.5 em;
font-size:.8em;
display:block;
text-align:center;
text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
.nav a:hover
{
color:#F7931E;
text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
Jak widać, właściwości przejścia wzajemnie się nadpisują. W tej chwili cień tekstowy będzie animowany, ale nie kolor. Jak sprawić, by obie były jednocześnie animowane? Dziękuję za wszelkie odpowiedzi.
animation
css
css-transitions
Eric Thoma
źródło
źródło
transition: all
jest to bardzo buggy na safari / ipad: joelglovier.com/writing/…Odpowiedzi:
Właściwości przejścia są rozdzielane przecinkami we wszystkich przeglądarkach obsługujących przejścia:
ease
jest domyślną funkcją pomiaru czasu, więc nie musisz jej określać. Jeśli naprawdę chceszlinear
, musisz to określić:Zaczyna się to powtarzać, więc jeśli zamierzasz używać tych samych funkcji czasu i funkcji pomiaru czasu w wielu właściwościach, najlepiej jest użyć różnych
transition-*
właściwości zamiast skrótów:źródło
Możesz także po prostu znacząco:
źródło
Coś takiego jak poniżej pozwoli na wielokrotne przejścia jednocześnie:
Przykład: http://jsbin.com/omogaf/2
źródło
Jeśli wszystkie właściwości będą animowane tak samo, możesz ustawić każdą osobno, co pozwoli ci nie powtarzać kodu.
Jest więcej na ten temat: Skrót CSS o wielu właściwościach?
Unikałbym używania właściwości all (właściwość przejścia nadpisuje „wszystko”), ponieważ mogłoby to spowodować niepożądane zachowanie i nieoczekiwane pogorszenie wydajności.
źródło
źródło
Oto MNIEJ mieszanka do przenoszenia dwóch właściwości jednocześnie:
źródło
Możliwe jest ustawienie wielu przejść z różnymi wartościami czasu trwania, opóźnienia i funkcji czasowej. Aby podzielić różne przejścia, użyj
,
Odniesienie: https://kolosek.com/css-transition/
źródło
Można również uniknąć całkowitego określenia właściwości.
źródło