CODEWITHSUNDEEP
htmlcss
OMantid
OMantid

Reputation: 3

CSS Animation Depending on Child Element

.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation-name: backdiv;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.heart:hover {
  animation-name: beat;
}

.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}

.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(0.6) rotate(-45deg);
  }
}

@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/css/mainStyles.css"
      media="screen"
    />
    <title>HeartBeat</title>
  </head>
  <body>
    <div class="back"></div>
    <div class="heart"></div>
  </body>
</html>

I'm trying to run an animation of a heart beat on hover. The heart div works as expected, however I'm trying to animate the background at the same time as I hover over the heart. I looked into trying to apply a background selector for the parent element within my .heart class, but apparently nothing exist for CSS? Any hints or tips would be appreciated, thank you.

Upvotes: 0

Views: 163

Answers (2)

lanpierre
lanpierre

Reputation: 102

One solution I have encountered (jQuery):

Modify the "backdiv" animation to your needs:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>by Lancelot Pierre Blaine</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<style>
.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
width: 50px;
height: 50px;
transform: rotate(-45deg);
animation-duration: 1s;
animation-iteration-count: infinite;
}

.heart:hover {
animation-name: beat;
}

.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}

.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}

@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}

@keyframes backdiv {
50% {
background: #ffe6f2;
}
100% {
background: #0b0203;
}
}
</style>
</head>

<body>

<div class="back"></div>
<div id="heart" class="heart"></div>

<script>
$(document).ready(function(){
  $(".heart").hover(function(){
    $(".back").css("animation-name", "backdiv");
    }, function(){
    $(".back").css("animation-name", "");
  });
});
</script>
</body>
</html>

Certainly possible with JS too!

Check w3schools for more examples (very clear instructions)

Upvotes: 0

Justin
Justin

Reputation: 2958

You will need to rearrange your html. You can't select a higher level tag with selectors.

Also since you have position fixed you'll need to set the z-index of the heart for it to be visible.

.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  animation-duration: 1s;
  animation-iteration-count: infinite;
  z-index: 1;
}
.heart:hover {
  animation-name: beat;
}
.heart:hover ~ .back {
  animation-name: backdiv;
}
.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(0.6) rotate(-45deg);
  }
}
@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/css/mainStyles.css"
      media="screen"
    />
    <title>HeartBeat</title>
  </head>
  <body>
    <div class="heart"></div>
    <div class="back"></div> 
  </body>
</html>

Upvotes: 1

Related Questions