Animating svg with css

by Radonirina Maminiaina

HTML

<h1>
Svg animation using full css (no JS)
</h1>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
        <rect fill="#F26767" width="400" height="400" />
        <g>
            <path fill="#E7E7E7" class="svg" d="M166.5,69.336c0,3.188-0.809,6.018-2.426,8.49c-1.617,2.473-3.95,4.395-6.996,5.766
		c-3.047,1.371-6.622,2.057-10.723,2.057c-3.422,0-6.293-0.241-8.613-0.721s-4.734-1.318-7.242-2.514V70.04
		c2.648,1.359,5.402,2.42,8.262,3.182c2.859,0.762,5.484,1.143,7.875,1.143c2.062,0,3.574-0.357,4.535-1.072
		c0.961-0.715,1.441-1.635,1.441-2.76c0-0.703-0.193-1.318-0.58-1.846s-1.008-1.06-1.863-1.6c-0.856-0.539-3.135-1.64-6.838-3.305
		c-3.352-1.523-5.866-3-7.541-4.43c-1.676-1.429-2.918-3.07-3.727-4.922c-0.809-1.851-1.213-4.043-1.213-6.574
		c0-4.734,1.723-8.425,5.168-11.074c3.445-2.648,8.179-3.973,14.203-3.973c5.32,0,10.746,1.23,16.277,3.691l-4.254,10.723
		c-4.805-2.203-8.953-3.305-12.445-3.305c-1.805,0-3.117,0.316-3.938,0.949c-0.821,0.633-1.23,1.418-1.23,2.355
		c0,1.008,0.521,1.911,1.564,2.707c1.042,0.797,3.873,2.25,8.49,4.359c4.43,1.992,7.506,4.131,9.229,6.416
		S166.5,65.868,166.5,69.336z" />
            <path fill="#E7E7E7" class="svg" d="M203.309,33.547h15.539l-16.84,51.398H185.66l-16.77-51.398H184.5l6.996,26.051
		c1.453,5.789,2.25,9.821,2.391,12.094c0.164-1.64,0.492-3.691,0.984-6.152s0.926-4.395,1.301-5.801L203.309,33.547z" />
            <path fill="#E7E7E7" class="svg"...

CSS

body {
  font-family: "open sans";
}
.svg {
    opacity: 0;
    animation: kaboom 300ms ease forwards;
    animation-delay: 500ms;
}
.svg:nth-child(2) {
    animation-delay: 200ms;
}
.svg:nth-child(3) {
    animation-delay: 400ms;
}
.make {
    opacity: 0;
    transform-origin: 50%;
    animation: textScale 300ms cubic-bezier(0.075, 0.82, 0.165, 0) forwards ;
    animation-delay: 1s;
}
.make:nth-child(2) {
    animation-delay: 1200ms;
}
.make:nth-child(3) {
    animation-delay: 1400ms;
}
.make:nth-child(4) {
    animation-delay: 1600ms;
}
.make:nth-child(5) {
    animation-delay: 1800ms;
}
.make:nth-child(6) {
    animation-delay: 2000ms;
}
.make:nth-child(7) {
    animation-delay: 2200ms;
}
.make:nth-child(8) {
    animation-delay: 2400ms;
}
.make:nth-child(9) {
    animation-delay: 2600ms;
}
.make:nth-child(10) {
    animation-delay: 2800ms;
}
.make:nth-child(11) {
    animation-delay: 3000ms;
}
.make:nth-child(12) {
    animation-delay: 3200ms;
}
.make:nth-child(13) {
    animation-delay: 3400ms;
}
.dash {
    transform: scaleX(0);
    transform-origin: 50%;
    animation: animeDash 1000ms ease forwards ;
    animation-delay: 3600ms;
}
.dash:nth-child(1) {
    animation-delay: 4000ms;
}
.desktop, .mobile, .tablet {
    transform: scale(0);
}
.desktop {
    transform-origin: 50%;
    animation: desktop 1000ms cubic-bezier(0.23, 0, 0.320, 1) forwards;
    animation-delay: 5000ms;
}
.mobile {
    transform-origin: 50%;
    animation: mobile 1000ms cubic-bezier(0.23, 0, 0.320, 1) forwards;
    animation-delay: 6200ms;
}
.tablet {
    transform-origin: 50%;
    animation: tablet 1000ms cubic-bezier(0.23, 0, 0.320, 1) forwards;
    animation-delay: 7800ms;
}
.device {
    transform-origin: 50%;
    animation: device 1000ms cubic-bezier(0.23, 0, 0.320, 1) forwards;
    animation-delay: 9000ms;
}
.love {
    transform-origin: 50%;
    transform: scale(0);
    opacity: 0;
    animation: love 1000ms cubic-bezier(0.23, 0, 0.320, 1) forwards;
    animation-delay:...