3

Подскажите как поправить то что анимация для фона , обратно меняется резко. И вообще может быть подобную анимацию можно добиться как-нибудь более просто?

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

html,
body {
  max-width: 100%;
  height: 100%;
}

.cards {
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: auto;
  gap: 10px;
}

.card {
  position: relative;
  width: 399px;
  overflow: hidden;
  background: red;
}

.card:after {
  content: "";
  margin: 0;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  width: 0;
  height: 0;
}

.card__text {
  position: absolute;
  padding: 10px;
  font-size: 20px;
  transform: translate(0px, 420px);
  transition: transform .5s ease .5s;
  z-index: 2;
}

.card__title {
  position: relative;
  font-size: 25px;
  z-index: 2;
}

.card:hover .card__text {
  transform: translate(0px, 0px);
}

.card:hover::after {
  animation: circle 1s forwards;
}

@keyframes circle {
  0% {
  }
  100% {
    width: 600px;
    height: 600px;
  }
}
<div class="cards">
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
</div>

2 ответа 2

5

Вадим, в данном случае для такой анимации использовать правило @keyframes будет лишним. Достаточно навесить событие при наведении (hover) на элемент. Пример:

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

html,
body {
  max-width: 100%;
  height: 100%;
}

.cards {
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: auto;
  gap: 10px;
}

.card {
  position: relative;
  width: 399px;
  overflow: hidden;
  background: red;
}

.card:after {
  content: "";
  margin: 0;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  width: 0;
  height: 0;
  transition: all 1s;
}

.card:hover:after {
  width: 600px;
  height: 600px;
}

.card__text {
  position: absolute;
  padding: 10px;
  font-size: 20px;
  transform: translate(0px, 420px);
  transition: transform .5s ease 0s;
  z-index: 2;
}

.card__title {
  position: relative;
  font-size: 25px;
  z-index: 2;
}

.card:hover .card__text {
  transform: translate(0px, 0px);
  transition: transform .5s ease .5s;
}
<div class="cards">
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
</div>

upd.

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

html,
body {
  max-width: 100%;
  height: 100%;
}

.cards {
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: auto;
  gap: 10px;
}

.card {
  position: relative;
  width: 399px;
  overflow: hidden;
  background: red;
}

.card:after {
  content: "";
  margin: 0;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  width: 0;
  height: 0;
  transition: all 1s;
}

.card:hover:after {
  width: 200%;
  padding-top: 200%;
}

.card__text {
  position: absolute;
  padding: 10px;
  font-size: 20px;
  transform: translate(0px, 420px);
  transition: transform .5s ease 0s;
  z-index: 2;
}

.card__title {
  position: relative;
  font-size: 25px;
  z-index: 2;
}

.card:hover .card__text {
  transform: translate(0px, 0px);
  transition: transform .5s ease .5s;
}
<div class="cards">
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
  <div class="card">
    <div class="card__title">Lorem</div>
    <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  </div>
</div>

5
  • 1
    все так просто...спасибо
    – zxcqwe
    Commented 3 мар. 2021 в 9:27
  • небольшой вопрос еще, увеличивать высоту и ширину до 600px это не очень хорошо. Думал задать проценты , но тогда не получается круг, как с этим быть?
    – zxcqwe
    Commented 3 мар. 2021 в 9:53
  • 1
    нет. у :after размер увеличивается от 0 до 600px. И получается в итоге круг который перекрывает квадрат. Если я задам увеличить до 200% то анимация у :after будет как овал, если сам красный квадрат будет прямоугольником. А хотелось бы чтобы и у прямоугольника был круг. Но при этом уйти от строго заданных высот и ширин в px.
    – zxcqwe
    Commented 3 мар. 2021 в 10:01
  • пришла в голову такая идея, но на сколько это хорошо width: max(100vh, 100vw); height: max(100vh, 100vw);
    – zxcqwe
    Commented 3 мар. 2021 в 10:04
  • 1
    больше круг нравится при анимации чем квадрат)
    – zxcqwe
    Commented 3 мар. 2021 в 10:09
3

Может так

   * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

html,
body {
  max-width: 100%;
  height: 100%;
}

.cards {
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: auto;
  gap: 10px;
}

.card {
  position: relative;
  width: 399px;
  overflow: hidden;
  background: red;
}

.card:after {
  content: "";
  margin: 0;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  width: 0;
  height: 0;
  transition:1s;
}

.card__text {
  position: absolute;
  padding: 10px;
  font-size: 20px;
  transform: translate(0px, 420px);
  transition: transform .5s ease .5s;
  z-index: 2;
}

.card__title {
  position: relative;
  font-size: 25px;
  z-index: 2;
}

.card:hover .card__text {
  transform: translate(0px, 0px);
}

.card:hover::after {
    transition:1s;
    width: 600px;
    height: 600px; 
}
2
  • я немного изменил стили. Так чтобы размер фона менялся от 0 до большого при наведении. Как добиться без visibility:hidden;
    – zxcqwe
    Commented 3 мар. 2021 в 8:58
  • анимация тут и не нужна особо. Можно сразу в .card:hover::after { transition:1s; width: 600px; height: 600px; } . И в .card:after добавить transition:1s; Commented 3 мар. 2021 в 9:03

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.