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?
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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
