Background animation doesn't work (CSS, SCSS)
Question
I would like my background to appear slowly and gradually and I thought it would be fairly easy but I can't. Any suggestions? Can I only do it with html, CSS and SCSS (not a proficient user of the latter yet).
body { background-image: url(https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); background-repeat: no-repeat; animation-name: b-anime; animation-delay: 1s; animation-duration: 4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; transition-property: background; @keyframes b-anime { 0% { opacity: 0; } 25% { opacity: 0.25; } 50% { opacity: 0.5; } 75% { opacity: 0.75; } 100% { opacity: 1; } } }
<!DOCTYPE html> <html> <head> <title>icy-blues</title> <link rel="stylesheet" type="text/css" href="website1.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width> <meta name=" description " content="xx "> <meta name="keywords " content="stuff "> <meta name="author " content="Ray "> </head> <body> </body> </html>
1 answers
solution1
2 ACCPTED 2020-03-11 20:37:24
first of all, your keyframes definition has to be outside of your body styling. Then, it's not possible in this case, to use opacity for background-image transparency, take a look at a opacity documentation .
But you could set the transparent effect for a ::after element, and animate this.
You could do it this way:
body { position: relative; height: 100vh; width: 100vw; padding: 0; margin: 0; } body::after { content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; opacity: 0; animation-name: b-anime; animation-delay: 1s; animation-duration: 4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; transition-property: background; } @keyframes b-anime { 0% { opacity: 0; } 25% { opacity: 0.25; } 50% { opacity: 0.5; } 75% { opacity: 0.75; } 100% { opacity: 1; } }
<body></body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.