@keyframes动画（旋转）和：悬停（缩放）

问题描述：

我有一个基于@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);} 
}

答

最简单的解决方案将是包装在另一个元件的symbol-1和symbol-2和盘旋时变换这个元素。也可以使用一个转换来为其设置动画。看看下面插入的代码片段。

.pattern { 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
\t margin: 0 auto; 
 
    background-color: rgb(170, 57, 57); 
 
    color: rgb(255,255,255); 
 
} 
 

 
.grid { 
 
\t display: grid; 
 
\t grid-template-columns: repeat(12, 1fr); 
 
\t grid-template-rows: repeat(8, 1fr); 
 
\t justify-items: center; 
 
\t align-items: center; 
 
\t overflow: hidden; 
 
} 
 

 
.symbol { 
 
\t -webkit-transition: all 1000ms ease; 
 
\t -moz-transition: all 1000ms ease; 
 
\t -o-transition: all 1000ms ease; 
 
\t transition: all 1000ms ease; 
 
    transform: scale(0.5); 
 
    font-size: 2em 
 
} 
 

 
.symbol:hover { 
 
    transform: scale(1); 
 
} 
 

 
.symbol-1 { 
 
\t grid-area: 2/2/2/2; 
 
\t justify-self: center; 
 
} 
 

 
.symbol-2 { 
 
\t grid-area: 4/3/3/5; 
 
\t justify-self: center; 
 
\t align-self: start; 
 
} 
 

 
.downRight { 
 
\t animation: downRight 7s infinite; 
 
} 
 

 
.spin { 
 
\t animation: spin 7s infinite; 
 
} 
 

 
@keyframes spin { 
 
\t 0% { transform: rotate(0deg); } 
 
\t 100% { transform: rotate(360deg); } 
 
} 
 

 
@keyframes downRight { 
 
\t 0%, 100% { transform: translateX(0) translateY(0); } 
 
\t 50% { transform: translateX(20px) translateY(20px); } 
 
}

<body> 
 
    <div class="pattern grid"> 
 
    <!-- Wrap the symbols in a div with class "symbol" that scales on hover --> 
 
    \t <div class="symbol symbol-1"><div class="downRight"> \t 1 \t </div></div> 
 
    <div class="symbol symbol-2"><div class="spin"> \t 2 \t </div></div> 
 
    </div> 
 
</body>

我相信这能解决你的问题:)

喜（我想我已经删除了我的意外最后的评论 - 伟大的...）。你的解决方案解决了我的问题（谢谢！），但是CSS网格定位呢？它看起来不再工作：/我也尝试添加网格到.symbol，但是我回到了原来的一个 - 与：悬停不工作...我怎么能结合在一起：用css定位的动画元素网格与：悬停？ –

对不起，只需将'symbol-1'和'symbol-2'类交换到它们的父元素即可。请查看更新后的代码段。另外，如果我的答案解决了您的问题，请将其标记为正确答案，谢谢！ :) – Evochrome

谢谢！一切工作完美:) –

@keyframes动画（旋转）和：悬停（缩放）

相关推荐