Question about property transition

HTML-CSS
1

I’m trying to code a smooth transition of an image. I tried chatgpt for the first time. I know I should be careful using it.

In chatgpt the value: transform was also included for transition. But when I try to run the code without transform, my image still behaves how i want it to behave.

transform also appears in a white color on my VSCode, so it looks like, it is not needed.
Can someone explain me why?

HTML

<section id="introduction">
        <div id="about">
            <img src="ProfielFoto.png" width="300px" height="250">
                <div id="info">
                    <h1>Welkom</h1>
                      <p> 
                          Lorem
                          Lorem
      
                      </p>
                </div>
        </div>
</section>

CSS Without transform


#about img {
    border-radius: 2em;
    border:#4E4E35 solid ;
    margin-top:auto;
    margin-bottom:auto;
    transition: 0.3s ease;
    
    
    
}
#about img:hover {
  transform: translateY(-5px);
  
}

CSS With transform


#about img {
    border-radius: 2em;
    border:#4E4E35 solid ;
    margin-top:auto;
    margin-bottom:auto;
    transition: transform 0.3s ease;
    
    
    
}
#about img:hover {
  transform: translateY(-5px);
  
}
2

Hi,
Adding transform simply means the transition will only apply to any type of transformation. If you remove it, the transition will apply to all animations in your page.

3

It works exactly as it should on my computer.
transform est bien soumis à une transition lorsqu’il est modifié (sur hover)
What exactly do you want to do?

4

transition is a shorthand property (just like margin is a shorthand property).

It is a shorthand for the following CSS properties:

transition-behavior
transition-delay
transition-duration
transition-property
transition-timing-function

Whatever property value you leave out when setting the shorthand will default to their initial value. For transition-property that would be the value all. You pretty much always want to specify the transition-property value, as not doing so can lead to unexpected behavior and even performance issues.

As an aside. Shorthand properties in general, although handy, can lead to unexpected behavior. For example, using background to set the background-color can overwrite/unset previously set properties. Because, again, any unset properties for the shorthand will default back to their initial value. So you can inadvertently revert property values back to their initial value.

TL;DR being “lazy” with shorthand properties can lead to unexpected behavior.

Edit: Just a quick example

<div class="logo light"></div>

Setting the color to light/dark using the background property will unset all the other properties. But using background-color will not.

.logo {
  background: center / contain no-repeat
    url("https://global.discourse-cdn.com/freecodecamp/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg");
  height: 200px;
  padding: 2rem;
}

.dark {
  /* should use background-color */
  background: #0a0a23;
}

.light {
  /* should use background-color */
  background: #8f8fa5;
}