CODEWITHSUNDEEP
csscss-transitions
Hungrynow
Hungrynow

Reputation: 21

CSS transition to fade in image isn't working

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.

Upvotes: 0

Views: 923

Answers (1)

vineeth pappu
vineeth pappu

Reputation: 542

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

Upvotes: 1

Related Questions