CODEWITHSUNDEEP
csshovercontainers
Daniel Theman
Daniel Theman

Reputation: 145

css spin on hover of container

I looking to have i.spin animate when you hover on the container div.logo

HTML

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin:hover {
  animation: spin 450ms;
  animation-timing-function: linear;
}
<div class="logo">
  <i class="fa fa-envelope-o spin" aria-hidden="true"></i> D<span>e</span>trevnoc
</div>

Upvotes: 2

Views: 789

Answers (1)

Naren Murali
Naren Murali

Reputation: 56420

Do you want something like this?

Instead of watching for hover on the icon which is small, put the hover on the parent with class icon and add the hover animation to spin. Refer the below CSS.

.logo:hover > .spin {
  animation: spin 450ms;
  animation-timing-function: linear;
}


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.logo:hover > .spin {
  animation: spin 450ms;
  animation-timing-function: linear;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="logo">
  <i class="fa fa-envelope-o spin" aria-hidden="true"></i> <span>De</span>trevnoc
</div>

Upvotes: 1

Related Questions