html - 在带有过渡的悬停更改动画上
问题描述
我需要使用过渡效果更改动画。那就是改变第一个过渡到另一个有流动的过渡。当我尝试相同的动画时,动画会发生快速变化,如下面的片段所示。有什么方法可以动画动画的变化。我试过下面的代码。
body{
background: url('https://i.pinimg.com/originals/0b/76/08/0b760848c89b9e4abd03f74f19419498.jpg');
}
.bubble{
top: 50px;
left: 80px;
height: 100px;
width: 100px;
color: #000;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.4);
transform: translatey(0px);
cursor: pointer;
position: absolute;
border: 10px solid rgba(255,255,255,0.2);
animation: float 4s ease-in-out infinite;
}
.bubble span {
font-size: 12px;
line-height: 85px;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
text-align: center;
border-radius: 50%;
background: red;
}
.bubble:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border-radius: 50%;
box-shadow: 0 0 rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1),
0 0 0 16px rgba(255, 255, 255, 0.1), 0 0 0 24px rgba(255, 255, 255, 0.1);
z-index: -1;
animation: ripples 1s linear infinite;
animation-play-state: paused;
opacity: 0;
visibility: hidden;
transition: 0.5s;
transform: scale(0.5);
}
.bubble:hover {
transition: all 2s;
animation: tofixed 4s forwards;
box-shadow: none;
border-color: transparent;
}
.bubble:hover:before {
animation-play-state: running;
opacity: 1;
visibility: visible;
transform: scale(1);
}
@keyframes float {
0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
50% { box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px) scale(1); }
100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
}
@keyframes tofixed {
to { transform: translatey(0px) scale(0.9); }
}
@keyframes ripples {
to {
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 0 16px rgba(255, 255, 255, 0.1),
0 0 0 24px rgba(255, 255, 255, 0.1), 0 0 0 32px rgba(255, 255, 255, 0);
}
}
<div class="bubble">
<span class="bgviolet">ODOSTORE</span>
</div>
在上面的片段中,您可以看到当我将鼠标悬停在动画上时,动画会立即发生变化。
解决方案
推荐阅读
- javascript - mouseup 上的 clearTimeout 无法正常工作
- apache-spark-sql - 使用 Pyspark-SQL 估计性别平衡
- azure - 将现有 Azure 资源组项复制到另一个订阅 RG
- rest - Twilio Studio REST API 触发器 - 状态回调
- python - 使用字符偏移将已知匹配添加到 Spacy 文档
- java - 如何修复“org.glassfish.jersey.inject.hk2.RequestContext.RequestContext 必须在单例范围内”
- node.js - Paypal“PAYEE_NOT_CONSENTED”仅适用于 REST API?
- .net-core - 根据 IsTestProject 添加 nuget 引用
- reactjs - 如何显示 material-ui 自动完成字段的初始值?
- python - 遇到错误
.SaveAsFile,尚未找到通过任何非令牌来源从企业 Outlook 中提取文件的解决方案