@keyframes 动画（旋转）和 :hover（缩放）答案

【问题标题】：@keyframes animation (rotate) and :hover (scale)@keyframes 动画（旋转）和 :hover（缩放）
【发布时间】：2018-04-24 17:08:33
【问题描述】：

我在将基于 @keyframes（旋转）和 :hover 效果（缩放）的 css 动画结合起来时遇到问题 - 并且需要比我更有经验的人的帮助（我是新手 - 这很明显）。

我想创建某种动画背景，其中：
1. 无需与用户进行任何交互：小符号/字母/图标（无论如何）正在移动（其中一些旋转，一些在 X 或 Y 轴上移动）；
2：悬停时：它们也在增长（但仍在移动）；
最后：
3. 没有暂停beetwen @keyframe 动画。

现在我想出了这个代码https://jsfiddle.net/56q4b9fg/2/ 问题是在 :hover 我的基本动画从头开始而不是继续它们的轨迹。我怎样才能解决这个问题？以及如何解决我在每个序列后暂停的第三个问题？

.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 animation css-animations transition keyframe

【解决方案1】：

最简单的解决方案是将symbol-1 和symbol-2 包装在另一个元素中，并在悬停时转换该元素。还可以使用过渡来为其设置动画。看看下面插入的sn-p。

.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>

我相信这可以解决您的问题:)

【讨论】：

嗨（我想我已经意外删除了我的最后一条评论 - 太好了......）。您的解决方案解决了我的比例问题（谢谢！），但是 CSS 网格定位呢？看起来它不再起作用了：/我还尝试将网格添加到.symbol，但随后我又回到了第一格- :hover 不起作用...如何将其组合在一起：用css定位的动画元素网格与 :hover?
抱歉，只需将 symbol-1 和 symbol-2 类交换为其父元素即可。请查看更新的 sn-p。另外，如果我的回答解决了您的问题，请标记为正确答案，谢谢！ :)