CSS transition to fade in image isn't working

Question

Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.

    #header-image {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    width: 250px;
    margin-left: 10px;
    opacity: 1;
    transition: opacity 2s linear 1s;
}

I know I'm probably being thick so apologies in advance.

Does this answer your question? [css transition opacity fade background](https://stackoverflow.com/questions/21145621/css-transition-opacity-fade-background) — emerson.marini, Jan 18 '21 at 09:54
transition only works if you are changing a property, if you want to animate something without a property changing, then you probably want to use a keyframes animation instead — Pete, Jan 18 '21 at 10:11
@Pete thank you so much! I knew I was being an idiot. Keyframes animation did what I wanted, thank you! — Hungrynow, Jan 18 '21 at 15:11

vineeth pappu · Accepted Answer · 2021-01-19T04:02:30.547

In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;

so your css will look like..

    #header-image {
        position: absolute;
        top: 30px;
        left: 30px;
        background: blue;
        width: 100px;
        height: 100px;
        margin-left: 10px;
        animation: fadeIn 2s linear;
    }
    
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

<div id="header-image"></div>

Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.

If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.

However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js

Thank you for explaining! That makes sense. How can I make it transition automatically with the page load instead of requiring a user action? — Hungrynow, Jan 18 '21 at 12:20
If you want to do it on page load, you have 2 options. 1.) you can achieve it using javascript. or 2.) you can use css animation. — vineeth pappu, Jan 19 '21 at 03:48

CSS transition to fade in image isn't working

1 Answers1