剪切路径文本底部的悬停动画“ slidedown”不起作用你能帮助我吗？

问题描述

徽标底部的文本具有剪切路径，也许因此，我无法触发悬停动画。我已经更改了元素的调用类，但没有任何效果。动画已经在样式上，它称为“ slidedown”。但是，当将鼠标悬停在徽标上时，底部的文本会消失，并且不会启动动画。什么不对？谢谢。

<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88">
<defs>  
   <clipPath id="path-1">  
     <path class="bottom-path" d="M1421.75,395.66H8.58V322H1421.75 z" />  
   </clipPath>
   <clipPath id="path-2">  
     <path class="cls-x" d="M589,287.24H13V48H589Z"/>  
   </clipPath> 
 </defs>
<style>
@font-face {
  font-family: 'Dense Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Dense Regular'),url('Dense-Regular.woff') format('woff');
}
.cls-1{fill:#3ee7ad; font-family:Dense;font-size:343px; letter-spacing:0.112em;transform: translate(0,550px);
 -webkit-animation: slideup 2s forwards; /* Safari 4+ */
  -moz-animation:    slideup 2s forwards; /* Fx 5+ */
  -o-animation:      slideup 2s forwards; /* Opera 12+ */
  animation:         slideup 2s forwards; animation-delay: 2.3s;/* IE 10+,Fx 29+ */
  -webkit-animation-delay: 2.3s; /* Safari 4+ */
  -moz-animation-delay:    2.3s; /* Fx 5+ */
  -o-animation-delay:      2.3s; /* Opera 12+ */}
.cls-2{font-size:343px;font-family:Dense-Thin,Dense;font-weight:200;letter-spacing:0.112em;}
.cls-2{stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; fill: rgba(62,231,173,1); stroke: rgba(54,95,160,0); opacity: 0;
-webkit-animation: stroke 5.5s 1 forwards ease-in-out; /* Safari 4+ */
  -moz-animation:    stroke 5.5s 1 forwards ease-in-out; /* Fx 5+ */
  -o-animation:      stroke 5.5s 1 forwards ease-in-out; /* Opera 12+ */
  animation: stroke 5.5s 1 forwards ease-in-out;animation-delay: 2s;/* IE 10+,Fx 29+ */
  -webkit-animation-delay: 2s; /* Safari 4+ */
  -moz-animation-delay:    2s; /* Fx 5+ */
  -o-animation-delay:      2s; /* Opera 12+ */}

.cls-3{fill:#3ee7ad; font-family:Dense;}
.cls-3{font-size:73px; letter-spacing:0.206em;}
.cls-4{stroke:#3ee7ad;stroke-dasharray: 1390;
  stroke-dashoffset: 1390;stroke-width: 6px; stroke-linecap:butt;
  -webkit-animation: dash 8.5s linear forwards; /* Safari 4+ */
  -moz-animation:    dash 8.5s linear forwards; /* Fx 5+ */
  -o-animation:      dash 8.5s linear forwards; /* Opera 12+ */
  animation: dash 8.5s linear forwards;/* IE 10+,Fx 29+ */}

  .bottom-path {
    transform: scaleX(0);
  -webkit-animation: typing 4s steps(38) forwards; /* Safari 4+ */
  -moz-animation:    typing 4s steps(38) forwards; /* Fx 5+ */
  -o-animation:      typing 4s steps(38) forwards; /* Opera 12+ */
  animation: typing 4s steps(38) forwards; animation-delay: 0.5s; /* IE 10+,Fx 29+ */
  -webkit-animation-delay: 0.5s; /* Safari 4+ */
  -moz-animation-delay:    0.5s; /* Fx 5+ */
  -o-animation-delay:      0.5s; /* Opera 12+ */
}

@keyframes stroke {
    0%   {opacity: 1;fill: rgba(62,0); stroke: rgba(62,1);
        stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 4;}
    70%  {fill: rgba(62,1); }
    80%  {fill: rgba(62,1); stroke-width: 2; }
    100% {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}

@-webkit-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}
@-moz-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}
@-o-keyframes stroke {
  0%   {opacity: 1;fill: rgba(62,0); 
        stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;}
}

@-webkit-keyframes slideup {
  0%   {transform: translate(0,450px);}
  60%   {transform: translate(0,275px);}
   100% {transform: translate(0,287px);}
}
@-moz-keyframes slideup {
  0%   {transform: translate(0,287px);}
}
@-o-keyframes slideup {
  0%   {transform: translate(0,287px);}
}
@keyframes slideup {
  0%   {transform: translate(0,287px);}
}


/* The typing effect */

@-webkit-keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@-moz-keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@-o-keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}
@keyframes typing {
  0%   {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}

@keyframes fade-in {
  from { opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes dash {
0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@-moz-keyframes dash {
0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@-o-keyframes dash {
  0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
  25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
  90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
  100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@keyframes dash {
  0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
  25% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  40% {stroke-dasharray: 1390; stroke-dashoffset: 830;}
  75% {stroke-dasharray: 1390; stroke-dashoffset: 0;} 
  90% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
  100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@keyframes dashcont {
  0%  {stroke-dasharray: 1390; stroke-dashoffset: 1390;} 
  50% {stroke-dasharray: 1390; stroke-dashoffset: 0;}
  100%{stroke-dasharray: 1390; stroke-dashoffset: 1390;}
}

@keyframes slidedown {
  0%   {transform: translate(13.69px,320px);}
   100% {transform: translate(13.69px,385.74px);}
}

#palmdesign-logo:hover .cls-x {
    animation: typing 1.5s  forwards; animation-delay: 0.5s; /* IE 10+,Fx 29+ */}

#palmdesign-logo:hover .cls-2 {
    animation: stroke 7s infinite alternate ease-in-out;    
}


#palmdesign-logo:hover #text-bottom text.cls-3{
    animation: slidedown 2s;
}


</style>
<g id="text-palm" clip-path="url(#path-2)">
<text class="cls-1" transform="translate(0 287.26)">PALM</text></g>
<text class="cls-2" transform="translate(625 287.26)">DESIGN</text>
<g id="text-bottom" clip-path="url(#path-1)">
<text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA
</text>
</g>
<line id="linha" class="cls-4" x1="18" y1="314" x2="1408" y2="314"></line>
<rect id="rectangulo" x="18" y="38" width="1390" height="255" fill="transparent"/>
</svg>
´´´

解决方法

我已经更改了转换转换的值（y值），因为您将文本丢得很远。

我还简化了代码，删除了与您的问题无关的那些部分。

@font-face {
  font-family: "Dense Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Dense Regular"),url("Dense-Regular.woff") format("woff");
}

.bottom-path {
  transform: scaleX(0);
  animation: typing 4s steps(38) forwards;
  animation-delay: 0.5s;
}

@keyframes typing {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.cls-3 {
  fill: #3ee7ad;
  font-family: Dense;
}
.cls-3 {
  font-size: 73px;
  letter-spacing: 0.206em;
  transform: translate(13.69px,0px);
}

@keyframes slidedown {
  0% {
    transform: translate(13.69px,0px);
  }
  100% {
    transform: translate(13.69px,74px);
  }
}

#palmdesign-logo:hover #text-bottom text.cls-3 {
  animation: slidedown 2s;
}

svg {
  border: solid;
}

<svg id="palmdesign-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1433.04 398.88">
<defs>  
   <clipPath id="path-1">  
     <path class="bottom-path" d="M1421.75,395.66H8.58V322H1421.75 z" />  
   </clipPath>
 </defs>

<g id="text-bottom" clip-path="url(#path-1)">
<text class="cls-3" x="13.69" y="385.74">DESIGN GRÁFICO | WEB DESIGN | MULTIMÉDIA
</text>
</g>

</svg>