CSS multiple transform to same element during different event - html

Question

I have a set of link tags that appear on page load with translate3D. This works perfectly fine. But I need the link tags to either scale on it's hover. Which doesn't work directly.
Is there a way to achieve it with just CSS?
Here is the code :
.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">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>

Answer 1

The issue is the use of both that allow you to keep the last state of your animation thus the transform inside the animation will override the one on the hover that will never get activated.
You can split your animation into 2 animation and use both or forwards with only opacity and you will be able to have your transition after the animation is done.
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
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;
opacity:0;
}
.hlink:hover {
transform: translate(0px, -20px) scale(1.2);
color: red;
background: rgba(0, 0, 0, 0.6)
}
#keyframes fadeInUp {
from {
transform: translate3d(0, 100%, 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;
}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>

Answer 2

Please try this:
.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;
transform:translate3d(0,0,0); /* add it */
}
.hlink:hover{
transform:translate3d(0,0,0) scale(1.2); /* add it */
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); */ /* remove it */
}
}
.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">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>

Answer 3

You want to animate with the max-height property.
Set the max-height to say 50px on hover
set the max-height on the property itself to it's original height
Here is a working fiddle
Final css file:
.linkblock{
margin:20% 0;
}
.hlink{
width:12%;
height: 60px;
max-height: 60px; // add this
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{
max-height: 50px; // add this
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;}