我有一组链接标记出现在页面加载与translate3D.这完全没问题.但是我需要链接标签来缩放它的悬停.哪个不直接.
有没有办法用CSS实现它？
这是代码：
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
opacity: 0;
padding: 0 10px;
background: rgba(0,0.3);
display: inline-block;
text-align: center;
color: rgba(0,0.6);
transition: all 0.5s ease;
}
.hlink:hover {
transform: translate(0px,-20px);
color: red;
background: rgba(0,0.6)
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0,100%,0);
}
to {
opacity: 1;
transform: translate3d(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;
}
最佳答案
问题是两者的使用允许你保持动画的最后状态,因此动画内的变换将覆盖悬停上永远不会被激活的变换.
您可以将动画拆分为2个动画并使用仅具有不透明度的两个或前向动画,并且您可以在动画完成后进行转换.
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
padding: 0 10px;
background: rgba(0,0.6);
transition: all 0.5s ease;
opacity:0;
}
.hlink:hover {
transform: translate(0px,-20px) scale(1.2);
color: red;
background: rgba(0,0.6)
}
@keyframes fadeInUp {
from {
transform: translate3d(0,0);
}
}
@keyframes show {
to {
opacity:1;
}
}
.fadeInUp {
animation: fadeInUp 0.3s ease-in,show 0.3s ease-in forwards;
}
.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;
}
