0

I'm learning CSS and playing with TranslateY

I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below

.slideIn{
animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0%); }
}

The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.

However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like

.growMore{
animation: grow-more 0.5s forwards;
}

@keyframes grow-more {
    0% { height:100%; }
    100% { height: 150%; }
}

I did try adding another TranslateY but it also gave no result, hence why I tried with height

Is this possible?

MyDaftQuestions
  • 4,487
  • 17
  • 63
  • 120
  • 1
    sure this will help you out http://stackoverflow.com/questions/16795548/rotate-and-translate – Atula May 03 '16 at 07:36
  • Thank you@Atula, it certainly helps my understanding and makes me more confident I moved over to height instead of another translateY... if only I could get it work with height :S – MyDaftQuestions May 03 '16 at 07:37
  • glad to know that it helps :-) – Atula May 03 '16 at 07:39

0 Answers0