SVG line cross animation for icons - css

Question

I have two icons, one in original state, one in crossed off state.
I want to animate the cross line but changing dash-offset is not useful since those are two different svgs.
I'm looking at these animated icons but still couldn't figure out the magic part. I want to ask:
what should be the transition work flow?
I prefer to use pure CSS, is it possible?
A working example would be appreciated.

Answer 1

The animated icons on that page are quite complicated (more that they need to be IMO). But basically what they are doing is sliding a rectangular mask in from right to left, that covers the first icon, and uncovers the second icon.
Here is a simplified version, using pure CSS, that hopefully makes it clearer.
svg {
width: 100px;
height: 100px;
}
/* slides the two masks to the left on hover */
svg:hover #bottom-rect,
svg:hover #top-rect
{
transition: transform 500ms;
transform: translate(-24px, 0px);
}
/* slides the two masks back to the right when not hovered */
svg #bottom-rect,
svg #top-rect {
transition: transform 500ms;
transform: translate(0px, 0px);
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<defs>
<mask id="bottom">
<rect id="bottom-rect" width="24" height="24" fill="white" stroke="none"/>
</mask>
<mask id="top">
<rect id="top-rect" x="24" width="24" height="24" fill="white" stroke="none"/>
</mask>
</defs>
<g mask="url(#bottom)">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</g>
<g mask="url(#top)">
<line x1="1" y1="1" x2="23" y2="23"></line>
<path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
<path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</g>
</svg>

Answer 2

An approach with CSS.
You just show/hide the icons you want on hover. To animate the line, use CSS animations with stroke-dasharray and stroke-dashoffset. Comments in code.
/* for demo */
svg {
width: 100px;
height: 100px;
border: 1px solid black;
}
/* hide the off icon */
svg .off {
opacity: 0;
}
/* when user hovers SVG, the on icon is hidden... */
svg:hover .on {
opacity: 0;
}
/* ... and the off icon is shown */
svg:hover .off {
opacity: 1;
}
/* initial values for the stroke
-- these can be obtained with JS,
-- or you can work them out manually for CSS
*/
svg .line {
stroke-dashoffset: 40px;
stroke-dasharray: 40px;
}
/* when user hovers SVG, animate the line */
svg:hover .line {
animation: addLine 800ms forwards;
}
/* values for line animation */
#keyframes addLine {
from {
stroke-dashoffset: 40px;
}
to {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<g class="on">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</g>
<g class="off">
<line class="line" x1="1" y1="1" x2="23" y2="23"></line>
<path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
<path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</g>
</svg>