CODEWITHSUNDEEP
csstransition
Jay Williams
Jay Williams

Reputation: 79

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

Upvotes: 0

Views: 112

Answers (2)

thursday_dan
thursday_dan

Reputation: 581

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>

Upvotes: 1

Django
Django

Reputation: 158

There is a tutorial for transition: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

And Try ıt:

transition: all 0.5s ease-out;

Upvotes: 0

Related Questions