Search code examples
csstransition

css multiple transitions on one property?

I create a shape in CSS

.a {
  transform: scale(1);
  border-radius:100%;
  width:100px;
  height:100px;
  background-color:#444;
  transition: all .5s;
}

On hover I'm going to increase the scale over .5s.

.a:hover {
  transform: scale(1.2);
}

How can I set a delay and return back to the original scale?

Thanks

Solution

  • Is this the kind of effect you're looking for? You can use the delay property for the translation rule.

    .a {
  border-radius: 100%;
  color: #333;
  font-weight: bold;
  font-size: 1.5em;
  padding: 2em;
  width: 100px;
  height: 100px;
  background-color: #e3e3e3;
  transform: scale(1);
  transition: all .5s 2s;
}

.a:hover {
  transform: scale(1.2);
  transition: all .5s 0s;
}
    <p class="a">Hello World.</p>