CODEWITHSUNDEEP
csssvgcss-animationssvg-animate
ucsendre
ucsendre

Reputation: 33

svg inline css animation keyframes timing

I want to make an animated svg logo using css animation with keyframes. The animation works well, but I can not find a way to properly time the keyframes.

I want to achieve the below timeline:

I have the below svg code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
<defs><style>
.txtme {
transform-origin: center;
animation: anime 12s linear 3s infinite;
}
@keyframes anime {
33% { transform: rotate3d(0, 1, 0, 360deg); }
66% { transform: rotate3d(1, 0, 0, 360deg); } 
}
</style></defs>
<text class="txtme" fill="#000" x="25%" y="50%" style="font-family:sans-serif;">MyLogo</text>
</svg>

Could you please help me how could I achieve the above timeline using css keyframes.

Upvotes: 0

Views: 55

Answers (1)

Serhii Tkachenko
Serhii Tkachenko

Reputation: 56

To build 12s animation with provided requirements I might recommend to remove the animation-delay and manipulate with animation inside keyframes.

First step is to transform seconds to keyframe percentage:

  • 4s of animation is 33%
  • 2s of animation is 17%

Second step is to calculate keyframe percentage based on requirements:

  • 1st delay should be from 0 to 33%; (0-4s)
  • 1st rotation should be from 33% to 50%; (4s-6s)
  • 2d delay should be from 50% to 83%; (6s-10s)
  • 2d rotation from 83% to 100%; (10s-12s)

So the solution is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
<defs><style>
.txtme {
    transform-origin: center;
    animation: anime 8s linear 4s infinite;
}
@keyframes anime {
    33% { transform: rotate3d(0, 0, 0, 0deg); }
    50% { transform: rotate3d(0, 1, 0, 360deg); }
    83% { transform: rotate3d(1, 0, 0, 360deg); }
    100% { transform: rotate3d(1, 0, 0, 0deg); }
}
</style></defs>
<text class="txtme" fill="#000" x="25%" y="50%" style="font-family:sans-serif;">MyLogo</text>
</svg>

Upvotes: 3

Related Questions