Автор N|A задал вопрос в разделе Верстка, CSS, HTML, SVG
Плавное появление фона Собственно как сделать такое, если используется background-image? и получил лучший ответ
Ответ от Илья Ш[гуру]
css animation
div.background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
@-webkit-keyframes example {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Standard syntax */
@keyframes example {
0% {opacity: 0;}
100% {opacity: 1;}
}
div.text {
width: 200px;
height: 200px;
position: relative;
border: 1px solid red;
}
< div class='text' >
Text ..
< div class='background' >< /div >
< /div >
добавь в div свойство transitionнапример div.yourClass{transition: all .5s ease-in-out;}