Не удается оживить открытие карты

Question

Я пытаюсь анимировать кадр, в котором «сердечный взмах» открывается слева.Но не могу этого сделать - ось коробки и сердца при открытии не совпадают.

My jsFiddle https://jsfiddle.net/dk1446/unjqx08d/2/

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
  background-color: white;
  font-family: 'Poiret One', Segoe UI Light, cursive;
}

.heart {
  background-color: #d32f2f;
  display: inline-block;
  height: 200px;
  margin: 0 10px;
  position: relative;
  top: 0;
  /* transform: rotate(-45deg); */
  width: 200px;
  margin-top: 200px;
  margin-left: 500px;
  /* transform: rotate(0deg); */
}

.heart:before,
.heart:after {
  content: "";
  background-color: #d32f2f;
  border-radius: 50%;
  height: 200px;
  position: absolute;
  width: 200px;
}

.heart:before {
  top: -110px;
  left: 0;
}

.heart:after {
  left: 110px;
  top: 0;
}

#card {
  margin-top: 200px;
}

#message {
  height: 400px;
  width: 400px;
  margin-top: -410px;
  margin-left: 500px;
  background-color: #333;
  color: white;
  border: 3px dashed violet;
  border-radius: 35% 0 35% 0;
}

#card #heart1 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: closeLeft 2s ease-in-out forwards;
  -moz-animation: closeLeft 2s ease-in-out forwards;
  -ms-animation: closeLeft 2s ease-in-out forwards;
  animation: closeLeft 2s ease-in-out forwards;
}

#card:hover #heart1 {
  -webkit-animation: openLeft 2s ease-in-out forwards;
  -moz-animation: openLeft 2s ease-in-out forwards;
  -ms-animation: openLeft 2 ease-in-out forwards;
  animation: openLeft 2s ease-in-out forwards;
}

@-webkit-keyframes closeLeft {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(180deg);
  }
}

@-moz-keyframes closeLeft {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(180deg);
  }
}

@-ms-keyframes closeLeft {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(180deg);
  }
}

@keyframes closeLeft {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

@-moz-keyframes openLeft {
  from {
    -moz-transform: rotateY(180deg);
  }
  to {
    -moz-transform: rotateY(0deg);
  }
}

@-webkit-keyframes openLeft {
  from {
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
  }
}

@-ms-keyframes openLeft {
  from {
    -ms-transform: rotateY(180deg);
  }
  to {
    -ms-transform: rotateY(0deg);
  }
}

@keyframes openLeft {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

<div id="card">
  <div class="heart" id="heart1"></div>
  <div id="message">
    <h2>Happy Valentines Day</h2>
  </div>
  <!-- <div class="heart" id="heart2"></div> -->
</div>

Я бы хотел, чтобы «сердце» открывалось влево и закрывалось вправо.Это должно быть в соответствии с коробкой внизу.Я не могу придумать способ.

Answer 1

@ rorschach: наконец-то вы получили анимацию, но заметили ли вы область вашей карты, но она не разобралась !!Думаю, когда вы наводите курсор на карту, анимация должна начаться, так что я думаю, вы либо задали для карты максимальную ширину.

Answer 2

У тебя почти было это! Вам нужно добавить transform-origin: 0 0 к #heart1

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
  background-color: white;
  font-family: 'Poiret One', Segoe UI Light, cursive;
}

.heart {
  background-color: #d32f2f;
  display: inline-block;
  height: 200px;
  margin: 0 10px;
  position: relative;
  top: 0;
  /* transform: rotate(-45deg); */
  width: 200px;
  margin-top: 200px;
  margin-left: 500px;
  /* transform: rotate(0deg); */
}

.heart:before,
.heart:after {
  content: "";
  background-color: #d32f2f;
  border-radius: 50%;
  height: 200px;
  position: absolute;
  width: 200px;
}

.heart:before {
  top: -110px;
  left: 0;
}

.heart:after {
  left: 110px;
  top: 0;
}

#card {
  margin-top: 200px;
}

#message {
  height: 400px;
  width: 400px;
  margin-top: -410px;
  margin-left: 500px;
  background-color: #333;
  color: white;
  border: 3px dashed violet;
  border-radius: 35% 0 35% 0;
}

#card #heart1 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: closeLeft 2s ease-in-out forwards;
  -moz-animation: closeLeft 2s ease-in-out forwards;
  -ms-animation: closeLeft 2s ease-in-out forwards;
  animation: closeLeft 2s ease-in-out forwards;
  transform-origin: 0 0;
}

#card:hover #heart1 {
  -webkit-animation: openLeft 2s ease-in-out forwards;
  -moz-animation: openLeft 2s ease-in-out forwards;
  -ms-animation: openLeft 2 ease-in-out forwards;
  animation: openLeft 2s ease-in-out forwards;
}

@-webkit-keyframes closeLeft {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(180deg);
  }
}

@-moz-keyframes closeLeft {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(180deg);
  }
}

@-ms-keyframes closeLeft {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(180deg);
  }
}

@keyframes closeLeft {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

@-moz-keyframes openLeft {
  from {
    -moz-transform: rotateY(180deg);
  }
  to {
    -moz-transform: rotateY(0deg);
  }
}

@-webkit-keyframes openLeft {
  from {
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
  }
}

@-ms-keyframes openLeft {
  from {
    -ms-transform: rotateY(180deg);
  }
  to {
    -ms-transform: rotateY(0deg);
  }
}

@keyframes openLeft {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

<div id="card">
  <div class="heart" id="heart1"></div>
  <div id="message">
    <h2>Happy Valentines Day</h2>
  </div>
  <!-- <div class="heart" id="heart2"></div> -->
</div>

Вот скрипка: https://jsfiddle.net/disinfor/y0p2t94q/1/

Редактировать для получения дополнительной информации: источником по умолчанию для элемента является 50% 50% 0 - который переводится в середину элемента. 0 0 перемещает исходную точку в верхний левый угол.

Больше чтения: https://www.w3schools.com/cssref/css3_pr_transform-origin.asp