当元素使用多个动画时，使用 :hover 触发 @keyframes 动画
Posted
技术标签:
【中文标题】当元素使用多个动画时，使用 :hover 触发 @keyframes 动画【英文标题】：Using :hover to trigger @keyframes animation when the element uses multiple animations 【发布时间】：2014-02-23 14:52:25 【问题描述】：我有一组图标，它们从页面中心过渡到设定点，然后保持在那里。我想要做的是将它们设置为过渡以具有更厚的边框并在我将鼠标悬停在其中一个上时缩放到 130x130px，但只会出现初始动画
CSS：
.iconborder
border-width: 5px;
border-style: solid;
border-radius: 100em;
border-color: white;
.iconborder:hover animation-name: icongrow; animation-duration: 0.2s; animation-timing-function: cubic-bezier;
@keyframes icongrow
0%
border-width: 5px;
width: 100px;
height: 100px;
100%
border-width: 10px;
width: 130px;
height: 130px;
#FTPSlideOut
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
visibility: hidden;
animation-name: FTPSlideOut;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier;
animation-delay: 1s;
animation-fill-mode: forwards;
@keyframes FTPSlideOut
0%
transform: translate(0px, 0px);
visibility: visible;
100%
transform: translate(-300px, -150px);
visibility: visible;
和HTML：
<body style="background-color:#D4D4D4;height:100%;width:100%">
<img id="SlideUp" class="dropshadow" src="picCenterDotFinalwText.png">
<a href="/net2ftp"><img id="FTPSlideOut" class="dropshadow iconborder" src="FTP.png"></a>
<img id="PicturesSlideOut" class="dropshadow iconborder" src="Pictures.png">
<img id="VideosSlideOut" class="dropshadow iconborder" src="Videos.png">
<img id="MusicSlideOut" class="dropshadow iconborder" src="Music.png">
<img id="DocumentsSlideOut" class="dropshadow iconborder" src="Documents.png">
<a href="https://www.gmail.com"><img id="EmailSlideOut" class="dropshadow iconborder" src="Email.png"></a>
</body>
有什么线索吗？
【问题讨论】：
【参考方案1】：我不确定您为什么只使用关键帧来制作简单的悬停动画。 您可以仅为该动画使用 css3 过渡
看演示
@-webkit-keyframes icongrow
0%
border-width: 5px;
width: 100px;
height: 100px;
100%
border-width: 10px;
width: 130px;
height: 130px;
border-color:#ccc;
.iconborder
text-align:center;
border: solid 5px #fff; /* use shorthand */
border-radius: 100em;
/* customize */
-webkit-transition : border 0.2s linear;
/*-webkit-animation-duration: 0.2s;*/
.iconborder:hover
border: 10px solid #fff;
width: 130px;
height: 130px;
cursor:pointer;
/* -webkit-animation-name: icongrow;
-webkit-animation-fill-mode: forwards;*/
@-webkit-keyframes FTPSlideOutAnimate
0%
opacity:0;
-webkit-transform: translate(0,0);
100%
opacity:1;
-webkit-transform: translate(-300px, -150px);
#FTPSlideOut
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
/* customize */
opacity:0.1;
-webkit-transition: -webkit-transform 1s ease-in,
opacity 0.5s linear;
#FTPSlideOut:hover
-webkit-transform: translate(-300px, -150px);
opacity:1;
/*-webkit-animation: FTPSlideOutAnimate 0.2s linear;
-webkit-animation-fill-mode: forwards; */
http://jsfiddle.net/phcba/2/
在那个小提琴中，您可以取消对关键帧属性的注释，以检查如果没有为悬停效果正确使用关键帧时动画有多糟糕
我也不确定#FTPSlideOut 在您的网站上的位置和显示方式，所以我在该演示中几乎看不到它。我使用了不透明度而不是可见性，您需要根据自己的情况对其进行修改。
有关 CSS3 转换的更多信息： http://css-tricks.com/almanac/properties/t/transition/
干杯
【讨论】：
【参考方案2】：只需将您的动画放在带有悬停的类伪选择器中吗？像这样
.clickMes
color: white;
font-size: 17pt;
text-decoration: none;
.clickMes:active
color: cyan;
.clickMes:hover
animation: clickmes 1.3s infinite;
@keyframes clickmes
0%
background-color: none;
50%
background-color: cyan;
100%
background-color: none;
【讨论】：
以上是关于当元素使用多个动画时，使用 :hover 触发 @keyframes 动画的主要内容，如果未能解决你的问题，请参考以下文章