Menu
I use border animation for input when hover ! I can't set border-width in animation property so I set in :hover .When animation finished ,I want to go back to the original border state ,however border remain as 3px! How to solve it ?
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% {
}
}<!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>
880
Is this the same what you were expecting? please check
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
