search

orzubalsky / creative-computing-2018

0 stars 1 forks source link

Hover effect not working #94

Open albertparson opened 5 years ago

albertparson commented 5 years ago

I'm not sure how to apply my hover effect while my @keyframe animation is in effect at the same time.

.shape { width: 150px;
height: 150px; position: absolute; top: 20%; right: 40%; background: red; transition: all 3s; transition-delay: 1s; background-color: white; transform: skew(30deg); }

@keyframes jump { 0% {transform: translate3d(0,0,0) scale3d(1,1,1);} 40% {transform: translate3d(0,30%,0) scale3d(.7,1.5,1);} 100% {transform: translate3d(0,100%,0) scale3d(1.5,.7,1);} }

.variation-1 { transform-origin: 50% 50%; animation: jump .45s linear alternate infinite; }

.shape:hover variation-1{ transform: rotateZ(1005deg) scale(1.5); background-color: blue;

orzubalsky commented 5 years ago

It's hard to tell without seeing you html as well, but it seems like there might be an issue with the :hover selector. Does the element have both shape and variation-1 classes? If so, the selector will be .variation-1:hover {}. If you want to :hover to happen when you hover over the screen, the selector will be body:hover .variation-1 {}`