Addanimation to SVG with CSS
Tutorials
fill-rule=”evenodd” stroke=”#fff” stroke-
linecap=”round”/>
</g>
</svg>7. Initial states
Selecting our SVG elements in CSS is the same as any
other element. We use our classes to select those
elements within the SVG. Both parts of our SVG will
start as hidden when the page loads, so let’s use CSS
to set both element’s opacity to 0.path.rectText {
opacity:0;
}
rect.rectBackground{
opacity: 0;
}8. Declare the animations
We need to declare the name and keyframes for each
animation so that CSS knows what we want to do
when we ask it to perform an effect. I’ve chosen
textDraw and rectFade, as they describe each
animation. rectFade will be a simple two-step
animation. textDraw will have an extra middle step.@keyframes textDraw {
0%{}
50%{}
100%{}
}
@keyframes rectFade{
from{}
to{}
}9. Assign animation and
properties
We add the rectFade animation to the
rectBackground element and give it a duration of
one second. An easeOut cubic bezier is being used
to give it a smoother feel. We add “forwards” so that
the element keeps the properties of the last
keyframe when the animation ends.rect.rectBackground{
opacity:0;
animation:rectFade 1s cubic-bezier(0.645,
0.045, 0.355, 1) forwards;
}10. The rectangle animation
With just two keyframes, all we need to do for our
rectangle is set a start and finish set of attributes.
Let’s start with a 1% width and finish on 100% to give
an ‘expanding to the right effect.’ We can also set
opacity: 1 to the last keyframe so the shape fades in
at the same time.@keyframes rectFade{
from {9101364 �������������������������������������������������tutorial