Angular 5 Animations: Custom (not linear) animation-timing-function for keyframes
Clash Royale CLAN TAG#URR8PPP
Angular 5 Animations: Custom (not linear) animation-timing-function for keyframes
The requirements is to create an animation with a custom timing funnction. It can be defined via css as follows:
animation: text-animation 10s steps(50) 1s 1 normal both;
@keyframes text-animation
0%
width: 0;
100%
width: 50em;
The same animation can be presented as follows for the linear animation function
animations: [
trigger("textAnimation", [
transition(":enter", [
query(":self", [
animate(
"10s",
keyframes([
style(
width: "0",
),
style(
width: "50em",
)
])
)
])
])
])
]
Changing above function to something like
animate(
"10s steps(50) 1s 1 normal both",
keyframes([
style(
width: "0",
),
style(
width: "50em",
)
])
)
Doesn't bear any fruits, except an error "The provided timing value is invalid".
2trichetriche. What do you mean?
– Timothy
Aug 9 at 6:34
There's documentation and you should follow it.
– trichetriche
Aug 9 at 6:34
All for linear animation though. As I said it works flawlessly. I need stepped (animation function) one.
– Timothy
Aug 9 at 6:41
And as written, you can use
offset to step your animation.– trichetriche
Aug 9 at 6:42
offset
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Well keep the official syntax and it will work ...
– trichetriche
Aug 9 at 6:29