|
Сообщение от Сергей Ракипов
|
|
а что у меня тогда там анимируется, я же вижу анимацию
|
Вы видите браузерную ошибку, «баг» — согласно спецификации, это свойство анимируется дискретно, т. е. переключается между двумя адресами картинок. (
https://drafts.csswg.org/css-backgro...ckground-image)
|
Сообщение от voraa
|
|
А что у картинки?
|
У картинки в будущем будет функция
cross-fade(), которая позволяет свести несколько картинок при определённой непрозрачности.
|
Сообщение от voraa
|
|
И браузер имеет полное право делать с ним что угодно.
|
Ничего не делать, а то что вы видите в Chrome — это cross-fade со старым синтаксисом.
|
Сообщение от Сергей Ракипов
|
|
И почему когда резко убираешь то плавность пропадает при уходе с элемента
|
Потому что в webkit-браузерах используется cross-fade, который не может далее анимироваться, пока предыдущая анимация не завершилась (а она не успевает завершиться, поскольку вы резко убираете курсор, запуская следующую анимацию)
То, что вы хотите сделать, можно сделать так (без дополнительных и лишних элементов)...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<nav>
<a href="#" class="default">Default</a>
<a href="#" style="--image: url('https://placeimg.com/640/480/nature');">Nature</a>
<a href="#" style="--image: url('https://placeimg.com/640/480/tech');">Tech</a>
<a href="#" style="--image: url('https://placeimg.com/640/480/animals');">Animals</a>
</nav>
<style>
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: radial-gradient(circle at calc(100vw - 10rem) 25vh, #f1f1f1, #888);
}
nav {
display: grid;
align-content: end;
justify-content: center;
height: 100vh;
overflow: auto;
grid-auto-flow: column;
}
a {
padding: .5em 1em;
margin: .5em;
border: .1em solid;
color: deepskyblue;
text-decoration: none;
display: inline-block;
border-radius: .5em;
overflow: auto;
font: bold 200% "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif;
}
a.default {
visibility: hidden;
position: absolute;
}
a::after, .default::after {
content: "";
position: fixed;
top: 0; bottom: 0;
left: 0; right: 20rem;
background:
center / cover
no-repeat #333;
background-image:
var(--image, url('https://placeimg.com/800/600/people')),
radial-gradient(#333, black);
padding: 1em;
pointer-events: none;
transition: opacity 350ms 200ms, transform 350ms 200ms, visibility 0s 550ms;
opacity: 0;
transform: scale(2);
visibility: hidden;
will-change: opacity, transform, visibility;
z-index: -1;
}
@media (max-width: 75em) {
a::after, .default::after {
right: 0rem;
}
}
.default::after {
z-index: -2;
}
a:hover::after, .default:after {
opacity: 1;
transform: scale(1);
visibility: visible;
transition: opacity 350ms, transform 350ms, visibility 0s 0s;
}
</style>
</body>
</html>