我有一组链接标记出现在页面加载与translate3D . 这完全没问题 . 但是我需要链接标签来缩放它的悬停 . 哪个不直接 .
有没有办法用CSS实现它?这是代码:
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
opacity: 0;
padding: 0 10px;
background: rgba(0, 0, 0, 0.3);
display: inline-block;
text-align: center;
color: rgba(0, 0, 0, 0.6);
transition: all 0.5s ease;
}
.hlink:hover {
transform: translate(0px, -20px);
color: red;
background: rgba(0, 0, 0, 0.6)
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation: fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1) {
animation-delay: 1.0s;
}
.linkblock a:nth-child(2) {
animation-delay: 1.1s;
}
.linkblock a:nth-child(3) {
animation-delay: 1.2s;
}
.linkblock a:nth-child(4) {
animation-delay: 1.3s;
}
.linkblock a:nth-child(5) {
animation-delay: 1.4s;
}
.linkblock a:nth-child(6) {
animation-delay: 1.5s;
}
.linkblock a:nth-child(7) {
animation-delay: 1.6s;
}
.linkblock a:nth-child(8) {
animation-delay: 1.7s;
}
<div class="linkblock">
<a href="#" class="fadeInUp hlink">fsdfsdf</a>
<a href="#" class="fadeInUp hlink">fsdfsdf</a>
<a href="#" class="fadeInUp hlink">fsdfsdf</a>
<a href="#" class="fadeInUp hlink">fsdfsdf</a>
<a href="#" class="fadeInUp hlink">fsdfsdf</a>
<a href="#" class="fadeInUp hlink">fsdfsdf</a>
</div>
3 回答
您想要使用
max-height
属性进行动画处理 .在悬停时将max-height设置为50px,将属性本身的max-height设置为原始高度
这是一个工作fiddle
最终的css文件:
问题是使用
both
允许您保持动画的最后状态,因此动画内的变换将覆盖悬停上永远不会被激活的变换 .您可以将动画拆分为2个动画,并使用
both
或forwards
只有opacity
,您可以在动画完成后进行转换 .请试试这个: