我有基于@keyframes(旋转)的combinig css动画的问题:悬停效果(比例) - 需要一些比我更有经验的人的帮助(我是菜鸟 - 这很明显)。
我想创建一些动画背景,其中:
1.与用户没有任何交互:小符号/字母/图标(无论如何)正在移动(其中一些在旋转,一些在X或Y轴上移动);
2:悬停时:它们也在增长(但仍然在移动);
最后:
3. @keyframe动画没有停顿beetwen。
现在我想出了这段代码https://jsfiddle.net/56q4b9fg/2/问题在于:悬停我的基本动画从头开始而不是继续他们的轨道。我怎样才能解决这个问题?如何在每个序列后暂停解决我的第三个问题?
.pattern {
height: 100vh;
width: 100vw;
margin: 0 auto;
background-color: rgb(170, 57, 57);
color: rgb(255,255,255);
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
justify-items: center;
align-items: center;
overflow: hidden;
}
.symbol-1 {
grid-area: 2 / 2 / 2 / 2;
justify-self: center;
}
.symbol-2 {
grid-area: 4 / 3 / 3 / 5;
justify-self: center;
align-self: start;
}
.downRight {
animation: downRight 7s infinite;
}
.downRight:hover {
animation: downRightAndScale 7s infinite;
}
.spin {
animation: spin 7s infinite;
}
.spin:hover {
animation: spinAndScale 7s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes downRight {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(20px) translateY(20px); }
}
@keyframes spinAndScale {
0% { transform: rotate(0deg) scale(1.0); }
10% { transform: rotate(10deg) scale(1.1); }
50% { transform: rotate(180deg) scale(1.5); }
100% { transform: rotate(360deg) scale(1.0); }
}
@keyframes downRightAndScale {
0%, 100% { transform: translateX(0) translateY(0) scale(1.0);}
50% { transform: translateX(20px) translateY(20px) scale(1.5);}
}
答案 0 :(得分:0)
最简单的解决方案是将symbol-1
和symbol-2
包装在另一个元素中,并在悬停时转换此元素。还可以使用转换来为其设置动画。看一下下面插入的片段。
.pattern {
height: 100vh;
width: 100vw;
margin: 0 auto;
background-color: rgb(170, 57, 57);
color: rgb(255,255,255);
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
justify-items: center;
align-items: center;
overflow: hidden;
}
.symbol {
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
transform: scale(0.5);
font-size: 2em
}
.symbol:hover {
transform: scale(1);
}
.symbol-1 {
grid-area: 2 / 2 / 2 / 2;
justify-self: center;
}
.symbol-2 {
grid-area: 4 / 3 / 3 / 5;
justify-self: center;
align-self: start;
}
.downRight {
animation: downRight 7s infinite;
}
.spin {
animation: spin 7s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes downRight {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(20px) translateY(20px); }
}

<body>
<div class="pattern grid">
<!-- Wrap the symbols in a div with class "symbol" that scales on hover -->
<div class="symbol symbol-1"><div class="downRight"> 1 </div></div>
<div class="symbol symbol-2"><div class="spin"> 2 </div></div>
</div>
</body>
&#13;
我相信这可以解决你的问题:)