如何在不重置 CSS 中的旋转旋转的情况下停止动画(示例说明得最好)
How can I stop an animation without to reset the spinning rotation in CSS (example explains it best)
我有点菜鸟 CSS 问题 如果有人可以分享一些空闲时间来提供帮助。我想要做的是 div 在我离开(悬停)我的光标时停止并冻结在该位置,而不是重置到他固定的起始位置。
<script>
.rotatingDiv {
width: 50px;
height: 30px;
background-color: red;
margin: auto;
margin-top: 10rem;
cursor: pointer;
}
.rotatingDiv:hover {
animation: spin 4s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</script>
<body>
<div class="rotatingDiv"> </div>
</body>
如示例所示,div 在鼠标移出时不断重置为 0 度(默认)的起始位置,所以我想要实现的是 div 冻结在每当我从 div.
离开光标(鼠标移出/悬停)时的确切度数
我想你想要这个东西它会起作用
.rotatingDiv {
width: 50px;
height: 30px;
background-color: red;
margin: auto;
margin-top: 10rem;
cursor: pointer;
animation: spin 4s linear infinite;
animation-play-state: paused;
}
.rotatingDiv:hover {
animation: spin 4s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<body>
<div class="rotatingDiv"> </div>
</body>
我有点菜鸟 CSS 问题 如果有人可以分享一些空闲时间来提供帮助。我想要做的是 div 在我离开(悬停)我的光标时停止并冻结在该位置,而不是重置到他固定的起始位置。
<script>
.rotatingDiv {
width: 50px;
height: 30px;
background-color: red;
margin: auto;
margin-top: 10rem;
cursor: pointer;
}
.rotatingDiv:hover {
animation: spin 4s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</script>
<body>
<div class="rotatingDiv"> </div>
</body>
如示例所示,div 在鼠标移出时不断重置为 0 度(默认)的起始位置,所以我想要实现的是 div 冻结在每当我从 div.
离开光标(鼠标移出/悬停)时的确切度数我想你想要这个东西它会起作用
.rotatingDiv {
width: 50px;
height: 30px;
background-color: red;
margin: auto;
margin-top: 10rem;
cursor: pointer;
animation: spin 4s linear infinite;
animation-play-state: paused;
}
.rotatingDiv:hover {
animation: spin 4s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<body>
<div class="rotatingDiv"> </div>
</body>