For my logo, I am incorporating an SVG and aiming to create a push-down effect on one of the letters:
body {
background: skyblue;
}
@-webkit-keyframes push {
0%,
25%,
75%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
}
#Path_9-2 {
-webkit-animation: push 2s;
animation: push 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
<defs>
<filter id="Path_9" x="35.958" y="17.221" width="70.528" height="41.57" filterUnits="userSpaceOnUse">
<feOffset dx="2" dy="4" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="1" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
<path id="Path_7" data-name="Path 7" d="M18,17.15a13.73,13.73,0,0,0-9.31,3.42,4.3,4.3,0,0,0-4.22-3.42A4.43,4.43,0,0,0,0,21.71V47.24a4.49,4.49,0,0,0,4.56,4.62,4.44,4.44,0,0,0,4.49-4.62"...
The issue lies with cropping the 'o' when it is pushed down. I have attempted using overflow: visible
and adjusting the height but to no avail.