This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 8 months ago.
I want to have a background image fade in from invisible opacity, to 50% opacity, and stay there.
There was a similar question asked here, but I did not follow along at all, seems complicated. Maybe it'll help someone with my similar issue.
I just want to use CSS only if possible, no JS. This is what I have so far in my style.css:
body {
background-image: url("img/me.png");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
}
#keyframes fadeInBG {
0% { opacity: 0.0; }
100% { opacity: 0.5; }
}
You will want to change the image url to something else for your testing. Right now, it's applying the animation to the entire page body (including any text on the page), and not touching the background at all, background is always 100% with no animation. The simple text I have in my html file just says:
<h1> Hello world! </h1>
...which DOES do the animation. How can I direct the animation logic to the background image only? I wish you could designate body.background-image instead of body and it would be solved.
Another thing I noticed is that, once the animation is done, the text "jumps" to 100% opacity, it doesn't stay at 50% like I have it set as above. How to fix that?
Just add the code below in your CSS code.
body {
animation-fill-mode: forwards;
}
Useful link: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Also, I suggest you add a div to achieve it.
.bg-img {
background-image: url("https://media.istockphoto.com/photos/ginger-cat-portrait-picture-id1290233518?b=1&k=20&m=1290233518&s=170667a&w=0&h=C-eVqPpxcxCFqJsykl4rTzq0Kl995ZHCaLB9BgSgEzk=");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
/* add */
animation-fill-mode: forwards;
position: fixed;
inset: 0;
z-index: -1;
}
#keyframes fadeInBG {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
<h1> Hello world! </h1>
<div class="bg-img"></div>
Related
Hello I am trying to make a 'Sliding Pages animation', but it is just one page, or div. I want when I click a button. The div slides out of the page to the left, and comes out thorough the right.
For instance
| Animation
| <--- Div <-----
|
Here is a simple example where the div first slides out completely to the left and then comes in from the right.
It uses CSS animation to do this, for the first half of the animation sliding it to the left and out of view and for the second half sliding it in from the right.
Note, there is a little 'fiddle' at the half way point where we take the div from the left to the right, but with opacity very temporarily at 0. This is to prevent any possibility of a slight 'flash' as the div is moved across the screen.
const div = document.querySelector('div');
const button = document.querySelector('button');
div.addEventListener('animationend', function() {
div.classList.remove('move');
});
button.addEventListener('click', function() {
div.classList.add('move');
});
* {
margin: 0;
}
button {
position: fixed;
z-index: 1;
}
div {
background-image: linear-gradient(to right, red, blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.move {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
opacity: 1;
}
50.001% {
opacity: 0;
transform: translateX(100vw);
}
50.002% {
opacity: 1;
transform: translateX(100vw);
}
100% {
transform: translateX(0);
}
}
<button>Click me</button>
<div>This is the div</div>
There's not really enough information about what you're trying to achieve, and what you're already working with. Hopefully some of this helps.
Based off of your tags, I assume you're trying to achieve this with CSS alone. In which case you can use a keyframe animation to adjust the div's margin offset.
You can find more specifics about CSS animations here:
https://www.w3schools.com/css/css3_animations.asp
In order to accomodate the trigger for the keyframe animation, you could potentially create a hidden checkbox, and create a class for when it's :checked to start the animation. If you do use an animation to move the div off page, then you will probably also want to set the parent to hide overflow as well.
JavaScript would probably be cleaner, but you haven't really provided much information about what you're working with.
I remarked the PNG sequence files are either multiple files or a single file which contains all sequences. I can't figure it out if the two types of sequences have different names (and if yes what are these names). Further I try to find out how to use the image sequence j a SINGLE FILE like this one here
for HTML / javascript animations. I think I need a div which moves over the png file (clip path), but I can't find any example. Maybe you know some? Thank you!
You can animate in both directions too! There is a great article here (https://medium.com/jspoint/creating-css-animations-using-sprite-sheet-47e2b7a3793c), but I've edited the code for your example below.
div#cat {
height: 256px;
width: 512px;
background-image: url("https://i.stack.imgur.com/kuEev.png"); /* width: 2048px; height: 512px; */
animation: playX 0.5s steps(4) infinite, playY 1s steps(2) infinite; /* The seconds for playX should be the playY divided by the amount of rows */
}
#keyframes playX {
from {background-position-x: 0px;}
to {background-position-x: -2048px;}
}
#keyframes playY {
from {background-position-y: 0px;}
to {background-position-y: -512px;}
}
<div id="cat"></div>
Sorry, but I can animate horizontally (or vertically) only. If you stack your images side to side horizontally, it will be perfect.
.animatedImage {
background-image: url(https://i.stack.imgur.com/kuEev.png);
height: 300px;
width: 500px;
animation: png-animation 1s steps(3) forwards; /* To change speed of animation, change firs number; To include more images, change number in steps() */
animation-iteration-count:infinite; /* Make animation never ends */
}
#keyframes png-animation {
to {
background-position: -1500px 0px;
}
}
<div class="animatedImage"></div>
When I change blur filter, image trembles a little bit.
Here is demo at jsfiddle. Please click twice on button at demo
body {
background-color: #000;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: -1;
background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
background-size: cover;
transition: filter 2s;
}
body.blurred::before {
filter: blur(30px);
}
I am using Chrome 63.0.3239.84 on Mac with non-Retina display.
I see many similar question, but no one answer helps me
image moves on hover - chrome opacity issue
CSS transition effect makes image blurry / moves image 1px, in Chrome?
I cheated problem using transition by steps, not smoothly
transition-timing-function: steps(10, end);
It is not a solving, it is a cheating and can be applied not everywhere.
I can't explain it, but it works for me.
https://jsfiddle.net/tuzae6a9/6/
I have two images in an HTML page. One is black-and-white, the other is color. I would like to transition from the black-and-white image to the color image using a custom animation. The effect I'm looking for is where the image appears black-and-white, and then appears to be "painted" in color, stroke-by-stroke.
The easiest way I can think to do this is to create an animated gif that starts white and gets painted black, stroke-by-stroke. Then I could place the color image on top of the black-and-white image using absolute positioning and mask the color image with the animated gif.
However, before pursuing that I searched all over to see if anyone had ever done anything like that, and I've been unable to turn up any examples. Is that even possible, and can you show an example of it?
Or, is there a better way to achieve this effect?
If you have just two images then cross fading two overlayed images is pretty simple
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Look here at demo 3 & 4 http://css3.bradshawenterprises.com/cfimg/
I have done half of the work for you
for this html
<id class="base">
</id>
and this CSS
.base {
width: 200px;
height: 200px;
border: solid 1px black;
position: absolute;
}
.base:before, .base:after {
background-image: url("http://placekitten.com/200/300");
width: 100%;
height: 100%;
position: absolute;
content: '';
}
.base:after {
-webkit-filter: grayscale(1);
-webkit-mask-size: 200px 200px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px);
}
You get (in 2 pseudo elements) the original image and the image turned in grayscale. (You need a webkit browser for this).
Then , the grayscale image is turned transparent with an mask file.
I don't have any gif with transparencies, so I can not test the final result, but I think that it should work. (Just change .webkit-mask-image to url(gif)
Share your result if it works !
demo
And yes, it is a overkill, but once you get it working you can adapt with no work to another image !
updated demo with an animated gif as mask
This question already has answers here:
css3 animation on :hover; force entire animation
(7 answers)
Closed 8 years ago.
I'm running into a small problem attempting to have an animation stopped mid-animation gracefully returning to the default state. I'm applying an animation to a child element using the :hover pseudoclass on a parent element, but would like the animation to gracefully return to the default state when I stop hovering on the element. I'm getting the feeling that I shouldn't be using the :hover pseudoclass here and there's another method of approaching it, but I can't seem to figure out how to get it to transition off. It just instantly reverts to the base state, which of course makes sense because the animation is being stripped - but that's not the desired effect. This is the current HTML:
<div id="el1">
<div class="child"></div>
</div>
and the current CSS
#el1 {
margin-top: 100px;
position: relative;
background: transparent url(./image.png) no-repeat;
height: 100px;
width: 100px;
}
#el1 .child {
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
}
#el1:hover .child {
-webkit-animation-name: semiopacity;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes semiopacity {
from { opacity: 0; }
to { opacity: 0.4; }
}
To recap: There's a flashing white effect over the image when hovering. I want it to animate back to the original keyframe when I stop hovering instead of snapping back to "off". I can change either the HTML or CSS; no restrictions on how to make it work.
css3 animation on :hover; force entire animation
Something similar asked a couple days ago. This person also wanted their entire animation to show after hover was removed. Check it out.