我有一组图标从页面的中心到设定点过渡，然后留在那里。我想要做的就是将它们设置为过渡到具有较厚的边框和规模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>
任何线索？
你为什么要使用关键帧的只是一个简单的悬停动画林不知道。您可以使用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; */
}
在拨弄你可以取消注释关键帧性能检查，看看有多糟糕动画它使用关键帧时，如果不是你的悬停效果做对了
还林不知道该怎么#FTPSlideOut是位置和您的网站上显示，所以我把它在演示隐约可见。香港专业教育学院使用的透明度，而不是公开程度，你需要修改你的情况。
有关CSS3过渡的详细信息：qazxsw POI
干杯
只要把你的动画在它悬停类伪选择？像这样
http://css-tricks.com/almanac/properties/t/transition/