@NeonCoder

Как сделать так, чтобы шарик имел другую точку старта?

Есть шарик, он крутится по кругу. Я хочу поменять точку его старта, но не могу понять как.
Вот HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Animation</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="circle" id="circle"></div>
	</div>
</body>
</html>

Вот CSS:
* {
	margin: 0;
	padding: 0;
}

body {
	background: #111111;
}

.container {
	margin: 200px auto 0;
	width: 300px;
	height: 300px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	position: relative;
}

.circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: red;
	position: absolute;
	top: calc(50% - 25px);
        left: calc(50% - 25px);
	transform: translate(-50%, -50%);
}

.animate {
	animation: myOrbit 10s linear infinite;
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
Задайте отрицательный animation-delay. Или поверните .container через transform: rotate.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 окт. 2019, в 23:37
1000 руб./в час
19 окт. 2019, в 23:08
500 руб./за проект
19 окт. 2019, в 22:44
12500 руб./за проект