Animating the height of an SVG g element using CSS transitions

I've encountered a challenge: I want to create a blinking eye using SVG. I have created the graphic and converted it into SVG. My plan is to apply a CSS animation to make it blink, but despite spending a lot of time on it, I can't seem to solve the issue.

My approach involves changing the height of its g element with CSS transitions to achieve the blinking effect. However, when I add the CSS code, the eye just disappears. Here's 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 goal is to create a blinking eye that continues to blink every few seconds. Any suggestions or solutions are welcome, even if it involves JavaScript/jQuery.

View my jsFiddle link here.

Thank you in advance, Kax

cssanimationsvgtransition

Answer №1

If we want to create a realistic blinking effect for an eye, it may be necessary to redesign the eye itself. One approach could involve animating only the upper eyelid while covering the inner pupil with the eyelid. While this task may seem challenging, CSS might offer a more straightforward solution compared to SVG. An option is to simultaneously animate both the eyelid and the inner pupil by scaling them down vertically to nearly zero. However, at such small scales, the stroke width may appear thinner, possibly creating visible dashed lines instead of a solid one. To address this issue, it is essential to also animate (increase) the stroke width. Below is a sample CSS code snippet that can achieve this effect:

#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);        
  }
}

It's important to note that adjusting the animation duration (currently set to '3s' in the demo) requires corresponding changes to the keyframe percentages (set at '96%' in the demo) to ensure that the eyelid movement appears natural. While this method may not be perfect as previously mentioned, it can still be effective in certain use cases. Feel free to check out the demo.

UPDATE: When saving the SVG code into a file, remember to include the CSS code used for animation within the SVG file using the <style> tag as shown below:

<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>

<!-- SVG elements here -->

An alternative method involves utilizing pure SVG animations, although replicating CSS animations in SVG format may prove challenging.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

concealing the upper header while scrolling and shifting the primary header upwards

Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...

javascripthtmlcsswordpress

Troubleshooting CSS Code Issues on Myspace

Greetings! I am currently working on enhancing a friend's profile on myspace.com. I have two divs on each side of the screen that I want to align next to each other. I have tried using float: left; and float: right;, as well as experimenting with marg ...

cssmyspace

Guide to utilizing jQuery for random toggling of classes

My objective is to create a mouseover effect on a box that changes its color randomly. Currently, I have managed to achieve this by toggling one class (e.g. $("#evtTarget").toggleClass(highlighted-2);). However, I am now attempting to select a random class ...

javascriptjqueryhtmlcss

What are the methods for creating a diagonal line using GWT or the combination of HTML, CSS, and JavaScript?

I'm currently developing a web application that requires connecting elements with lines. I would prefer the lines to not be limited to just horizontal or vertical paths. Additionally, I need to be able to detect clicks on these lines. I've explor ...

javascripthtmlcssgwt

The specified height for input[type=button] in Firefox/Safari is adjusted by subtracting the padding and border

When implementing the following CSS: input[type=button] { background-color: white; border: 1px solid black; font-size: 15px; height: 20px; padding: 7px; } along with this HTML: <input type="button" value="Foo" /> I anticipate that the t ...

htmlcssheightpadding

Is it possible for me to utilize Bootstrap CSS directly from a CDN instead of including the SASS file in my Node project?

Just a quick inquiry to kick things off. I'm currently developing a node application and considering using SCSS for styling. My question is, if I include the Bootstrap CSS file from a CDN in my index.html, will I be unable to override the variables? ...

cssnode.jstwitter-bootstrapsassgruntjs

The arrangement of elements in an inline-block is determined by the width of the section

I have been attempting to replicate the layout shown in the image for quite some time. The elements (.element) are aligned vertically but they are not centered, instead they stick to the left side. My current code is as follows: HTML: <div id="_tec ...

htmlcsssass

Expanding the content width of Bootstrap Nav Pills

I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width f ...

csstwitter-bootstrapbootstrap-5nav-pills

Chrome now supports clickable circular canvas corners

I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning. This is where it gets e ...

javascripthtml5-canvascssclickable

Scroll the page only when the first radio button is clicked

After selecting a radio button with the ID "yourgoal", a div is displayed on my page. I want the page to scroll to that div only the first time a button in "yourgoal" is clicked. Below is the code I am currently using. However, I do not want the page to sc ...

javascriptjquerycss

Having trouble with the initial slides not appearing when utilizing multiple JavaScript carousels

I have encountered an issue with my carousels where the first slides are not displaying properly. I don't have much coding experience and have pieced together some code snippets from various sources, primarily w3schools. The page does not require any ...

javascripthtmlcsscarouselslideshow

Troubleshooting: Issues with React Material-UI breakpoints not functioning

Trying to create a responsive navbar using Material-UI. The goal is to hide the IconButton between 960px and 1920px, and display it from 0px to 960px. However, it seems to work only below 960px. Here's a snippet of the code for IconButton and ul: ...

cssreactjsmaterial-ui

Achieving Vertical Alignment of Content in Bootstrap 5

I've experimented with different approaches based on search results, StackOverflow suggestions, and examining existing code snippets. Here is the snippet of code I am working with: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to ensure that the text remains visible on the image?

Is there a way to maintain the static 'BUY NOW' tag on an image while allowing other elements to be dynamic? Any suggestions on how to achieve this within an img tag?https://i.sstatic.net/6eLoN.jpg ...

javascriptjqueryhtmlcss

The choices in the cell table selection are obscured due to the select table's height when opened

I am experiencing an issue with a table where each row contains two cells with "select" options. The problem arises when I open them, as they load within the table and the available options are not clearly visible. I can only view all the options by scroll ...

javascripthtmljquerycsstom-select

What is the best way to adjust the dimensions of an image using CSS?

I've been struggling to adjust the dimensions of my image using CSS by specifying a width and height attribute. However, instead of resizing the picture, it seems to simply zoom in on the existing image. For instance, I have an image that is 90px by ...

htmlcssimage

Modify the font style of the recommended actions buttons within the webchat interface

I am attempting to modify the font of the "suggested actions" button similar to how it is demonstrated in this reference for changing the font of the bubble text: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md In the provided exa ...

javascriptcssbotframeworkweb-chat

Struggling to align your image properly?

My attempt to center the image "Logo_Home.svg" on my page has failed, as it is currently positioned in the top left corner. Can anyone help me identify what I am doing wrong and guide me in the right direction? Thank you. EDIT 1 I realized that I forgot ...

htmlcsssvg

MudGrid: Ensuring precise vertical cell alignment

I'm a newcomer to MudBlazor and struggling with a basic task. My goal is to create a structured layout resembling a table with a fixed number of cells, like this: Mountains 5 Lakes 3 The names on the left should be regular size while the numbers ...

cssmudblazor

How to create a Vue.js animated navbar with scroll opacity

I am looking to create a fixed navbar that changes opacity based on user scrolling behavior. Initially, I want the navbar background to be transparent and then transition to white as the user scrolls down the page. An example of what I am trying to achieve ...

javascriptjquerycssvue.js