I have problem with CSS transition, it doesn't work on the first run

Question

I'm new to CSS, I have a problem with my transition code, it only works after the first time I click it, the first time I click it, it just changed instantly with no effect ( transition ).

Here is my code can some one help me ( explain ), Thank you.

This is my CSS code:

.holder {
  width: 400px;
  height: 400px;
  margin: auto;
  background-color: red;
  overflow: hidden;
  text-align: center;
}

.image-holder {
  width: 1200px;
  height: 400px;
  background-color: yellow;
  clear: both;
  position: relative;
  -o-transition: 5s;
  transition: 5s;
}

.button-holder {
  position: relative;
  top: -20px;
}

.button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: brown;
}

.slider-image {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

#change1:target~.image-holder {
  right: 0;
}

#change2:target~.image-holder {
  right: 400px;
}

#change3:target~.image-holder {
  right: 800px;
}

user_8620333 · Answer

Because the first time you don't have any right value defined (a default one) in order to have the transition working but after the first click you set a value thus it will always work. In other words, you cannot have a transition from auto value to px value (this is what is done by the first click).

Simply add a default value (right:0) and it will work:

.holder {
  width: 400px;
  height: 400px;
  margin: auto auto;
  background-color: red;
  overflow: hidden;
  text-align: center;
}

.image-holder {
  width: 1200px;
  height: 400px;
  background-color: yellow;
  clear: both;
  position: relative;
  right: 0px;
  -o-transition: 5s;
  transition: 5s;
}

.button-holder {
  position: relative;
  top: -20px;
}

.button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: brown;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

#change1:target~.image-holder {
  right: 0px;
}

#change2:target~.image-holder {
  right: 400px;
}

#change3:target~.image-holder {
  right: 800px;
}

I have problem with CSS transition, it doesn't work on the first run

1 Answers