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

Question

I have a problem with combinig css animation based on @keyframes (rotate) with :hover effect (scale) - and need some help from somebody more experienced then me (i'm rookie - that's obvious). 我在基于@keyframes的combinig css动画（旋转）和：hover效果（缩放）上遇到问题-需要一些经验丰富的帮助，然后我（我是菜鸟-显而易见）。

I would like to create some kind of animated background, where: 我想创建某种动画背景，其中：
1. without any interaction with user: small symbols/letters/icons (whatever) are moving (some of them spinning around, some moving in X or Y axis); 1.无需与用户进行任何互动：小符号/字母/图标（无论如何）正在移动（其中一些旋转，一些在X或Y轴上移动）；
2: when hover: they are also growing (but still moving); 2：悬停时：它们也在增长（但仍在移动）；
and finally: 最后：
3. There is no pause beetwen @keyframe animations. 3.没有暂停beetwen @keyframe动画。

Right now I have came up with this code https://jsfiddle.net/56q4b9fg/2/ The problem is that at :hover my basic animations starts from the beginning instead of continuing their track. 现在我想出了这段代码https://jsfiddle.net/56q4b9fg/2/问题是，在：hover，我的基本动画从头开始，而不是继续前进。 How can I fix this? 我怎样才能解决这个问题？ And how to resolve my third problem with pause after every sequence? 以及如何解决每个序列后的暂停我的第三个问题？

.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);}
}

Answer 1

The simplest solution would be to wrap the symbol-1 and symbol-2 in another element and transform this element when hovered. 最简单的解决方案是将symbol-1和symbol-2包装在另一个元素中，并在悬停时对其进行转换。 Also use a transition in order to animate it. 还可以使用过渡来制作动画。 Take a look at the snippet inserted below. 看看下面插入的代码段。

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

I trust this solves your problem :) 我相信这可以解决您的问题:)

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-12 14:38:25

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-12 14:38:25

解决方案1
0 已采纳 2017-11-12 14:38:25