Остановить анимацию и выровнять все круги на одной линии при наведении курсора

Я сделал анимацию, которая при наведении должна быть такой, как на изображении ниже; 1 Но вместо этого он всегда выравнивается так: 2 Я хочу выровнять все по прямой линии, когда анимация приостанавливается при наведении курсора. Но этого не произошло. Я попытался использовать animation-fill-mode:forwards;, но это не сработало. Все <div id = "circle"> должны быть выровнены по прямой линии, чтобы он напоминал прямой блок из нескольких цветов, как и мои первые фотографии, чего я ожидал. Это случается только иногда, но не каждый раз. Я хочу, чтобы это происходило каждый раз, когда я навешиваю <div>. Вы также можете использовать javascript. но эта анимация должна работать, и все <div> должны выровняться по прямой линии.

.circle-container{
	height:100px;
	display:flex;
	position:absolute;
	width:fit-content;
	overflow:hidden;
	align-items:center;
	justify-content:center;
}
div.circle1 {order:1;}
div.circle2 {order:2;}
div.circle3 {order:3;}
div.circle4 {order:4;}
div.circle5{order:5;}
.circle1, .circle2, .circle3, .circle4, .circle5{
	border-radius:45%;
}

#circle{
	align-items:center;
	justify-content:center;
	color:white;
	display:flex;
	height:55px;
	width:55px;
}
	.circle5{
		background:#FF6347;
		animation:bubbling5 1s infinite;
		animation-direction:alternate;
	}
	.circle4{
		background:#4682B4;
		animation:bubbling4 1s infinite;
		animation-direction:alternate;
	}
	.circle3{
		background:#D2B48C;
		animation:bubbling3 1s infinite;
		animation-direction:alternate;
	}
	.circle2{
		background:#008080;
		animation:bubbling2 1s infinite;
		animation-direction:alternate;
	}
	.circle1{
		background:#D8BFD8;
		animation:bubbling1 1s infinite;
		animation-direction:alternate;
	}
	@keyframes bubbling1 {
    0% {
        transform: translateY(0px) translateX(22px);
    }
    50% {
        transform: translateY(-10px) translateX(22px);
    }
    75% {
        transform: translateY(10px) translateX(22px);
    }
    100% {
        transform: translateY(0px) translateX(22px);
    }
}
	@keyframes bubbling2 {
    0% {
        transform: translateY(0px) translateX(12px);
    }
    45% {
        transform: translateY(-10px) translateX(12px);
    }
    70% {
        transform: translateY(10px) translateX(12px);
    }
    100% {
        transform: translateY(0px) translateX(12px);
    }
}
@keyframes bubbling3 {
    0% {
        transform: translateY(0px) translateX(2px);
    }
    40% {
        transform: translateY(-10px) translateX(2px);
    }
    65% {
        transform: translateY(10px) translateX(2px);
    }
    100% {
        transform: translateY(0px) translateX(2px);
    }
}
@keyframes bubbling4 {
    0% {
        transform: translateY(0px) translateX(-8px);
    }
    35% {
        transform: translateY(-10px) translateX(-8px);
    }
    60% {
        transform: translateY(10px) translateX(-8px);
    }
    100% {
        transform: translateY(0px) translateX(-8px);
    }
}
@keyframes bubbling5 {
    0% {
        transform: translateY(0px) translateX(-18px);
    }
    30% {
        transform: translateY(-10px) translateX(-18px);
    }
    55% {
        transform: translateY(10px) translateX(-18px);
    }
    100% {
        transform: translateY(0px) translateX(-18px);
    }
}
 .circle-container:hover {
	position:absolute;
	}
 .circle-container:hover  .circle5 {
		border-radius:0% 30% 30% 0%;
		animation-play-state:paused;
		transition: all 0.2s;
	}
	
 .circle-container:hover  .circle4 {
		border-radius:0%;
		animation-play-state:paused;
		transition: all 0.4s;
		
	}
 .circle-container:hover  .circle3 {
		border-radius:0%;
		animation-play-state:paused;
		transition: all 0.6s;
	}
 .circle-container:hover  .circle2 {
		border-radius:0%;		
		transition: all 0.8s;
		animation-play-state:paused;
	}
 .circle-container:hover  .circle1 {
		border-radius:30% 0% 0% 30%;
		transition: all 1s;
		animation-play-state:paused;
	}
 .circle-container:hover  .c-title {
 	display:none;
	}

<div class = "circle-container">	
	<div id = "circle" class = "circle1"><h1 class = "c-title">E</h1></div>
	<div id = "circle" class = "circle2"><h1 class = "c-title">M</h1></div>
	<div id = "circle" class = "circle3"><h1 class = "c-title">A</h1></div>
	<div id = "circle" class = "circle4"><h1 class = "c-title">I</h1></div>
	<div id = "circle" class = "circle5"><h1 class = "c-title">L</h1></div>
</div>

javascript html css animation

27.10.2018 17:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, кто-то выдал тонну ненужного кода =))

Что касается вашего вопроса, вы должны вообще удалить анимацию, а не ставить ее на паузу. См. Фрагмент ниже.

.circle-container {
  height: 100px;
  display: flex;
  position: absolute;
  width: fit-content;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.circle-container div {
  display: inline-block;
  height: 55px;
  width: 55px;
  margin-right: -10px;
  border-radius: 45%;
  color: white;
  font:900 2em/55px serif;
  text-align: center;
  animation: bubbling 1s infinite alternate;
  transition: all .2s;
}

.circle-container div:nth-child(1) {
  background: #D8BFD8;
}

.circle-container div:nth-child(2) {
  background: #008080;
  animation-delay: .1s;
}

.circle-container div:nth-child(3) {
  background: #D2B48C;
  animation-delay: .2s;
}

.circle-container div:nth-child(4) {
  background: #4682B4;
  animation-delay: .3s;
}

.circle-container div:nth-child(5) {
  background: #FF6347;
  margin: 0;
  animation-delay: .4s;
}

@keyframes bubbling {
  50% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(10px);
  }
}

.circle-container:hover div {
  border-radius: 0;
  color: transparent;
  transform: translateY(0);
  animation: none;
}

.circle-container:hover div:last-child {
  border-radius: 0 30% 30% 0;
}

.circle-container:hover div:first-child {
  border-radius: 30% 0 0 30%;
}

<div class = "circle-container">
  <div>E</div>
  <div>M</div>
  <div>A</div>
  <div>I</div>
  <div>L</div>
</div>

27.10.2018 18:17

Другие вопросы по теме

Оберните PHP с переменной в скрытый DIV

Проблемы с адаптивным дизайном css

Я не могу автоматически обновить браузер и очистить кеш

Html2pdf скачать pdf

Mozilla firefox с использованием "@media screen и (-webkit-min-device-pixel-ratio: 0)"

Angular 6: дата исчезает при обновлении

Как обновить один компонент на основе обработчика событий другого компонента?

Как обернуть строку, которая является родственником сильного тега, в новый тег с помощью jquery?

WordPress css не загружается после добавления кода AdSense в header.php

Фильтр / поиск и отображение только значков

Остановить анимацию и выровнять все круги на одной линии при наведении курсора

Ответы 1

Другие вопросы по теме

Похожие вопросы