CODEWITHSUNDEEP
htmlcssanimation
Noé
Noé

Reputation: 325

Skip animation on page load without javascript

I'm trying to run an animation on hover, and a reverse animation on un-hover; the problem is that I don't want the animation to run on page load. Is there a way to do that without javascript? Thank you for your help.

.box {
  background-color: black;
  padding-top: 10px;
  padding-left: 20px;
  border-radius: 30px;
  box-shadow: 7px 7px 8px #717171;
  color: white;
  font-size: 10;
  font-family: Audiowide;
  font-size: 10;
  width: 1.2cm;
  height: 1.5cm;
}

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.box_anim_blue {
  animation-name: box_hover_blue_reverse;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  cursor: pointer;
}

.box_anim_blue:hover {
  animation-name: box_hover_blue;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes box_hover_blue {
  from {background-color: black;
        box-shadow: 7px 7px 8px #717171;}
  to {background-color: #0044ff;
      box-shadow: 9px 9px 15px #717171;}
}

@keyframes box_hover_blue_reverse {
  from {background-color: #0044ff;
      box-shadow: 9px 9px 15px #717171;}
  to {background-color: black;
      box-shadow: 7px 7px 8px #717171;}
}
<div class="box box_anim_blue">
    <p>Test</p>
  </div>

Upvotes: 0

Views: 157

Answers (1)

doğukan
doğukan

Reputation: 27491

You don't need to animation for that. Just use hover and transition.

.box {
  background-color: black;
  padding-top: 10px;
  padding-left: 20px;
  border-radius: 30px;
  box-shadow: 7px 7px 8px #717171;
  color: white;
  font-size: 10;
  font-family: Audiowide;
  font-size: 10;
  width: 1.2cm;
  height: 1.5cm;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box_anim_blue {
  background-color: black;
  box-shadow: 7px 7px 8px #717171;
  cursor: pointer;
  transition: 0.5s;
}

.box_anim_blue:hover {
  background-color: #0044ff;
  box-shadow: 9px 9px 15px #717171;
}
<div class="box box_anim_blue">
  <p>Test</p>
</div>

Upvotes: 2

Related Questions