Stuck on animation.
Hi everyone! I'm a bit stuck on what key frames I should you to make an animation appear like it's moving towards the flex box below (pictured in the comp).
My code is in hubl so excuse the variables. But right now I have this:
{# Animation Styles #}
#{{ name }}.animated-tabs .animated-tabscontainer .animated-tabsnav ul li a:after {
background-color: {{ module.style.accent_color.color }}
}
#{{ name }}.animated-tabs .animated-tabscontainer .animated-tabsnav ul li.active a:after {
animation: extend 500ms fowards 1 both;
}
@keyframes extend { 0% { min-width: 0px; } 50% { min-width: 75%; } 100% { min-width: 150%; } } But no luck. I don't know if I should do something like a transform translate in the keyframes instead?
@keyframes extend { 0% { min-width: 0px; } 50% { min-width: 75%; } 100% { min-width: 150%; } } But no luck. I don't know if I should do something like a transform translate in the keyframes instead?
3 Replies