Jak mieć wiele przejść CSS na elemencie?
To dość proste pytanie, ale nie mogę znaleźć bardzo dobrej dokumentacji na temat właściwości przejścia CSS. Oto fragment 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 nadpisują się nawzajem. W obecnym stanie tekst-cień będzie animowany, ale nie kolor. Jak sprawić, by obie animacje były jednocześnie animowane? Dzięki za odpowiedzi.
7 answers
Właściwości przejścia są rozdzielane przecinkami we wszystkich przeglądarkach obsługujących przejścia:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease
jest domyślną funkcją pomiaru czasu, więc nie musisz jej określać. Jeśli naprawdę chcesz linear
, musisz go określić:
transition: color .2s linear, text-shadow .2s linear;
Zaczyna się to powtarzać, więc jeśli masz zamiar używać tych samych funkcji czasu i czasu w wielu właściwościach, najlepiej jest użyć różnych właściwości transition-*
zamiast skrótu:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-26 22:15:43
Można również po prostu znacznie z:
.nav a {
-webkit-transition: all .2s;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-15 22:17:48
Coś takiego jak poniżej pozwoli na wielokrotne przejścia jednocześnie:
-webkit-transition: color .2s linear, text-shadow .2s linear;
-moz-transition: color .2s linear, text-shadow .2s linear;
-o-transition: color .2s linear, text-shadow .2s linear;
transition: color .2s linear, text-shadow .2s linear;
Przykład: http://jsbin.com/omogaf/2
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-14 17:43:24
Jeśli wszystkie animowane właściwości będą takie same, możesz ustawić każdą z nich osobno, co pozwoli Ci nie powtarzać kodu.
transition: all 2s;
transition-property: color, text-shadow;
Jest o tym więcej tutaj: Skrót przejścia CSS z wieloma właściwościami?
Unikałbym używania właściwości all( transition-property nadpisuje 'all'), ponieważ możesz skończyć z niechcianym zachowaniem i nieoczekiwanymi efektami.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-08 02:22:56
.nav a {
transition: color .2s, text-shadow .2s;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-25 04:43:04
Oto mniej mixin dla przejścia dwóch właściwości na raz:
.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
-webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
-moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
-o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-26 15:30:02
Możliwe jest ustawienie wielu przejść z różnymi wartościami dla czasu trwania, opóźnienia i funkcji czasu. Aby podzielić różne przejścia użyj ,
button{
transition: background 1s ease-in-out 2s, width 2s linear;
-webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}
Odniesienie: https://kolosek.com/css-transition/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-17 13:56:20