Question

我有一个带有css和js文件的html程序，我在我的一个元素上有一个连续循环的旋转动画，当我将鼠标悬停在它上面时，它将动画更改为另一个动画，但当我将它悬停时，它立即移回0deg导致不舒服的跳跃，有没有办法让动画知道当前从那个位置开始的位置？这是我的代码，所有这些都是有点长的

body{
  background: #808080;
}
.Glow{
  transform: rotate(90deg);
  background:blue;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}
.Glow:nth-child(1){
  width: 300px;
  height: 300px;
  background: #ffffff;
  -webkit-clip-path: polygon(00% 100%, 50% 50%, 100% 100%);
}
.Glow:nth-child(2){
  width: 300px;
  height: 300px;
  background: #ffffff;
  -webkit-clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
}
.Glow:nth-child(3){
  width: 270px;
  height: 270px;
  margin: 15px;
  background: #808080;
}
.Glow:nth-child(4){
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(30% 100%, 45% 85%, 50% 50%, 55% 85%, 70% 100%);
  background: #ffffff;
}
.Glow:nth-child(5){
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(30% 0%, 45% 15%, 50% 50%, 55% 15%, 70% 0%);
  background: #ffffff;
}
.Glow:nth-child(6){
  left: 45%;
  top: 19%;
  border-radius: 0%;
  width: 3px;
  height: 100px;
  background: linear-gradient(#808080, #cccccc);
  animation: null;
  transform: rotate(0deg);
}
.Glow:nth-child(7){
  left: 46.6%;
  top: 19%;
  border-radius: 0%;
  width: 3px;
  height: 100px;
  background: linear-gradient(#808080, #cccccc);
  animation: null;
  transform: rotate(0deg);
}
.Glow:nth-child(8){
  width: 150px;
  height: 150px;
  margin: 75px;
  -webkit-clip-path: polygon(0% 0%, 0% 30%, 8% 39%, 8% 61%, 0% 70%, 0% 100%, 100% 100%, 100% 70%, 92% 61%, 92% 39%, 100% 30%, 100% 0%);
  background: #ffffff;
}
.Glow:nth-child(9){
  width: 150px;
  height: 150px;
  margin: 75px;
  -webkit-clip-path: polygon(6% 41%, 6% 60%, 0% 66%, 0% 34%);
  background: #ffffff;
}
.Glow:nth-child(10){
  width: 150px;
  height: 150px;
  margin: 75px;
  -webkit-clip-path: polygon(94% 41%, 94% 60%, 100% 66%, 100% 34%);
  background: #ffffff;
}
.Glower:hover{
  left: 37%;
  top: 20%;
  animation: spin1 2s linear 0s infinite;
}
.Glower{
  transform: rotate(0deg);
  position: absolute;
  left: 37%;
  top: 20%;
  width: 300px;
  height: 300px;
  animation: spin 4s linear 0s infinite forwards;
}

@-webkit-keyframes spin{
  100%{
    -webkit-transform: rotate(450deg);
  }
}
@-webkit-keyframes spinside{
  100%{
    -webkit-transform: rotate(270deg);
  }
}
@-webkit-keyframes openCircle1{
  100%{
    top: 40%;
  }
}
@-webkit-keyframes openCircle2{
  100%{
    top: 10%;
  }
}
@-webkit-keyframes spin1{
  0%{
    -webkit-transform: scale(1) rotate(0deg);
  }
  25%{      
    -webkit-transform: scale(.9) rotate(120deg);
  }
  75%{
    -webkit-transform: scale(1.1) rotate(240deg);
    }
  100%{
    -webkit-transform: scale(1) rotate(360deg);
  }
}

编辑：我使用spin1和旋转动画btw 编辑2：这里是codepen upload https://codepen.io/Inertiality/pen/mEBkvN 编辑3：我能使用过渡吗？因为我看不出那些可以与动画一起使用

无缝的CSS动画

0 个答案: