SVG g element height with css transition - css

Question

I am stuck with an issue. my goal is to create a blinking eye in svg. I created the graphic converted into svg. Now i planned to put a css animation on it so it looks like its blinking. I spent lot of time on it but not able to solve the issue.
my approach to achieve this effect is to change its g element height with css transition so it will looks like blinking but when i put css on it it just disappear :( below is the css code I used:
#svg_7 path{
transform:scale(0, -1);
-webkit-transform:scale(0, -1);
}
svg code
<g id="svg_7">
<path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
<circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
Main purpose is to create a blinking eye that keeps blinking after every few seconds. please do suggest me a solution. even we can use js/jquery if required.
jsfiddle link
thanks in advance
Kax

Answer 1

In fact to have the closest effect (to reality) of blinking eye, I think you have to redesign the eye. Such as we need to animate the upper eyelid only (not both). Also the inner pupil should be covered by the eye lid. Doing so is not easy, at least I feel like that it can be done more easily with CSS than with SVG. However the time of shutting the eye lid is short, we can just animate both the eyelid and the inner pupil. Scaling down the vertical size of both to nearly 0 should do the job. However we can notice that the stroke-width becomes thinner at such a small scaling (may create some visible dashed lines instead of a solid one). So we also have to animate (increase) the stroke-width. Here is the CSS code (please run it in webkit-based browsers, it should work for all browsers):
#svg_7 path{
-webkit-transform-origin:50%;
-webkit-animation:blink 3s infinite alternate;
}
#svg_9 {
-webkit-transform-origin:50%;
-webkit-animation:coreblink 3s infinite alternate;
}
#-webkit-keyframes blink {
0%, 96% {
-webkit-transform:scale(1,1);
stroke-width:1.4434px;
}
100% {
-webkit-transform:scale(1,0.05);
stroke-width:6px;
}
}
#-webkit-keyframes coreblink {
0%, 96% {
-webkit-transform:scale(1,1);
}
100% {
-webkit-transform:scale(1,0.05);
}
}
Note that, if you increase the animation-duration (it's 3s in the demo), you should also increase the key percentage (it's 96% in the demo) so that the time of shutting the eye lid is not considerably large. I know this is not perfect (as what I said before), but it's at least acceptable in some use case and hope you are satisfied with it.
Demo.
UPDATE: If you want to save the SVG code into a file, you should also ship the CSS code (used to animate the SVG) along with the SVG file by using <style> tag like this:
<svg width="99" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
#svg_7 path{
-webkit-transform-origin:50%;
-webkit-animation:blink 3s infinite alternate;
}
#svg_9 {
-webkit-transform-origin:50%;
-webkit-animation:coreblink 3s infinite alternate;
}
#-webkit-keyframes blink {
0%, 96% {
-webkit-transform:scale(1,1);
stroke-width:1.4434px;
}
100% {
-webkit-transform:scale(1,0.05);
stroke-width:6px;
}
}
#-webkit-keyframes coreblink {
0%, 96% {
-webkit-transform:scale(1,1);
}
100% {
-webkit-transform:scale(1,0.05);
}
}
</style>
<g id="svg_1">
<rect id="svg_2" height="71.991" width="71.99" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent" y="0.71191" x="26.195"/>
<line id="svg_3" y2="0.71191" x2="26.195" y1="27.12591" x1="0" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
<line id="svg_4" y2="72.70391" x2="26.195" y1="99.11691" x1="0" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
<rect id="svg_5" height="71.991" width="71.992" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="#000000" y="27.12491" x="0"/>
<g id="svg_6">
<g id="svg_7">
<path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent">
</path>
<circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
</g>
</g>
<polygon id="svg_10" points="98.1849594116211,72.70391845703125 71.9919662475586,99.116943359375 71.9919662475586,27.12591552734375 98.1849594116211,0.7119140923023224 " stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
</g>
</svg>
Another approach is try using pure SVG animate. However I find it hard to have an equivalent of SVG animation to CSS animation.