Question

悬停时我使用边框动画进行输入！我无法在动画属性中设置border-width，因此我设置了:hover。当动画完成后，我想返回原始边框状态，但边框保持为3px！怎么解决？

＆＃13;

 input {
   margin:1.2rem;
   padding:5px 10px;
 
 }
 .pp {
   margin:1.2rem;
   min-width:10px;
   height:10px;
 }
 input:hover {
   -webkit-animation-name: haha;
   -webkit-animation-duration:1s;
   outline:none;border-width:3px;
   animation-timing-function:ease-in-out;
   
 }
 @-webkit-keyframes haha {
    
    0% {
   
      	border-left:solid red;
        opacity:.3;
      }
      20% {
       
        border-top:solid red;
        opacity:.7;
      }
      50% {
        
        border-right: solid red;
        opacity:.5;
      }
      70% {
          border-bottom: solid red;
      opacity:.9
      }
      100% {
        
      }
      
 }

＆＃13;

<!DOCTYPE html>
<html>

<body>


<p><input type="text" ng-model="name"></p>
<p ng-bind="name" class='pp'></p>

<input type="text" ng-model="namelast">
<h3 ng-bind="namelast" class='pp'></h3>

</body>
</html>

＆＃13;

Answer 1

这和你期望的一样吗？请检查

input {
   margin:1.2rem;
   padding:5px 10px;
 
 }
 .pp {
   margin:1.2rem;
   min-width:10px;
   height:10px;
 }
 input:hover {
 border: 1px solid #ccc;
-webkit-animation-name: haha;
-webkit-animation-duration: 1s;
outline: none;
animation-timing-function: ease-in-out;
   
 }
 @-webkit-keyframes haha {
    
    0% {
   
      	border-left:solid red;
        opacity:.3;
      }
      20% {
       
        border-top:solid red;
        opacity:.7;
      }
      50% {
        
        border-right: solid red;
        opacity:.5;
      }
      70% {
          border-bottom: solid red;
      opacity:.9
      }
      100% {
      }
      
 }

<!DOCTYPE html>
<html>

<body>


<p><input type="text" ng-model="name"></p>
<p ng-bind="name" class='pp'></p>

<input type="text" ng-model="namelast">
<h3 ng-bind="namelast" class='pp'></h3>

</body>
</html>

Answer 2

只需从悬停效果中移除border-width: 3px即可实现此目的。请尝试下面的代码段。

 input {
   margin:1.2rem;
   padding:5px 10px;
 
 }
 .pp {
   margin:1.2rem;
   min-width:10px;
   height:10px;
 }
 input:hover {
   -webkit-animation-name: haha;
   -webkit-animation-duration:1s;
   outline:none;
   border-width:1px;
   animation-timing-function:ease-in-out;
   
 }
 @-webkit-keyframes haha {
    
    0% {
   
      	border-left:solid red;
        opacity:.3;
      }
      20% {
       
        border-top:solid red;
        opacity:.7;
      }
      50% {
        
        border-right: solid red;
        opacity:.5;
      }
      70% {
          border-bottom: solid red;
      opacity:.9
      }
      
 }

<!DOCTYPE html>
<html>

<body>


<p><input type="text" ng-model="name"></p>
<p ng-bind="name" class='pp'></p>

<input type="text" ng-model="namelast">
<h3 ng-bind="namelast" class='pp'></h3>

</body>
</html>

Answer 3

您正在寻找的CSS是：

             animation-fill-mode: 
     -webkit-animation-fill-mode:

动画填充模式属性指定动画未播放时的元素样式（完成时或延迟时）。

默认情况下，CSS动画不会影响元素，直到第一个关键帧播放＆＃34;，然后在最后一个关键帧完成后停止。 animation-fill-mode属性可以覆盖此行为。

了解更多信息： https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

动画结束后返回原始边框状态？

3 个答案: