文章/答案/技术大牛

发布

社区首页 >问答首页 >@关键帧动画(旋转)和:悬停(缩放)

问@关键帧动画(旋转)和:悬停(缩放)
EN

Stack Overflow用户

提问于 2017-11-11 16:38:06

回答 1查看 2.6K关注 0票数 1

我有一个问题的组合css动画的@关键帧(旋转)与:悬停效果(比例)-需要一些帮助，更有经验的人，然后我(我是菜鸟-这是显而易见的)。

我想创造一些动画背景，在这里：

没有与用户的任何交互:小符号/字母/图标(任何东西)都在移动(其中一些在旋转，有些在X或Y轴上移动)； 2:悬停时:它们也在生长(但仍在移动)；最后：
没有暂停，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);}
}

keyframe

css

animation

css-animations

transition

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-12 14:38:25

最简单的解决方案是将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>

我相信这能解决你的问题

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47240256

复制

相似问题

问@关键帧动画(旋转)和:悬停(缩放)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@关键帧动画(旋转)和:悬停(缩放)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@关键帧动画(旋转)和:悬停(缩放)
EN