1
我有一个基于@keyframes(旋转)与:悬停效果(比例)的combinig css动画的问题 - 并需要一些更有经验的人帮助我(我菜鸟 - 这很明显)。@keyframes动画(旋转)和:悬停(缩放)
我想创建某种动画背景,在哪里:
1.不与用户进行任何交互:小符号/字母/图标(任何)正在(其中一些转圈,在X的一些移动或Y轴); 2:悬停时:它们也在增长(但仍在移动);
最后:
3.没有暂停beetwen @keyframe动画。
现在我已经想出了这个代码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);}
}
喜(我想我已经删除了我的意外最后的评论 - 伟大的...)。你的解决方案解决了我的问题(谢谢!),但是CSS网格定位呢?它看起来不再工作:/我也尝试添加网格到.symbol,但是我回到了原来的一个 - 与:悬停不工作...我怎么能结合在一起:用css定位的动画元素网格与:悬停? –
对不起,只需将'symbol-1'和'symbol-2'类交换到它们的父元素即可。请查看更新后的代码段。另外,如果我的答案解决了您的问题,请将其标记为正确答案,谢谢! :) – Evochrome
谢谢!一切工作完美:) –